我有 2 个独立的模块，它们的设计完全不同。因此我想创建一个自己的模块“帐户”。如果我包含 import { AppComponent as Account_AppComponent} from './accounts/app/app.component'; 行，则会显示 index.html 模块。它没有在那里解决 app-root 问题。我想我忘了导入。
我如何运行两个独立的区分路由表？为什么它不显示我的设计内容？
app-module.ts(缩短):
import { AccountsModule } from './accounts/accounts.module';
@NgModule({
imports: [
AccountsModule,
],
})
应用程序路由.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import { KontakteComponent } from './kontakte/kontakte.component';
import { AppComponent as Account_AppComponent} from './accounts/app/app.component';
const routes: Routes = [
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: 'index', component: MainComponent },
{ path: 'kontakte', component: KontakteComponent },
{ path: 'accounts/app', component: Account_AppComponent, outlet: 'aux' },
];
@NgModule({
imports: [RouterModule.forRoot(routes,{onSameUrlNavigation: 'reload'})],
exports: [RouterModule]
})
export class AppRoutingModule { }
账户/账户.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { HeaderComponent } from './header/header.component';
import { AppComponent } from './app/app.component';
import { AppRoutingModule } from '../app-routing.module';
@NgModule({
declarations: [MainComponent, HeaderComponent, AppComponent],
imports: [
CommonModule,
AppRoutingModule,
]
})
export class AccountsModule { }
accounts/app/app.component.html:它只包含应该在布局中的内容。
accounts/header/header.component.html:仅包含页眉。
accounts/main/main.component.html:
<!DOCTYPE html>
<html lang="en">
<body>
<app-header></app-header>
<main>
<router-outlet name="aux"></router-outlet>
</main>
</body>
</html>
编辑:还是一样的情况。未解决。
最佳答案
你应该在你的 app-module.ts 中导入 AppRoutingModule
import { AccountsModule } from './accounts/accounts.module';
@NgModule({
imports: [
AccountsModule,
AppRoutingModule
],
})
所以在你的帐户模块中删除 AppRoutingModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { HeaderComponent } from './header/header.component';
import { AppComponent } from './app/app.component';
import { AppRoutingModule } from '../app-routing.module';
@NgModule({
declarations: [MainComponent, HeaderComponent, AppComponent],
imports: [
CommonModule
]
})
export class AccountsModule { }
关于javascript - Angular - 多模块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57331712/