0

我仍然习惯于 Angular 以及如何正确构建不同的组件和模块。我想根据最佳实践设置我的应用程序并最大限度地提高效率。我目前有多个模块。我有一个要导航到的“基本”模块，但根据 URL，我想合并来自其他模块的组件。这是我的 app-routing.module 当前设置的方式：

const routes: Routes = [
  { path: '', component: BaseComponent },
  { path: 'featureone', loadChildren: () => import('./feature-one/feature-one.module').then(m => m.FeatureOneModule) },
  { path: 'featuretwo', loadChildren: () => import('./feature-two/feature-two.module').then(m => m.FeatureTwoModule) },
  { path: '**', redirectTo: '', pathMatch: 'full'}
];

我了解此路由设置不正确，但我不确定如何以最有效的方式正确设置它。

目前，如果我导航到''，它将按预期加载 BaseComponent 。如果我添加 <app-feature-one></app-feature-one> 或 添加<app-feature-two></app-feature-two> 到 BaseComponent 模板，它会抛出一个错误，如“初始化之前无法访问 'FeatureOneModule'”

是否有某种方法可以保留诸如“featureone”和“featuretwo”之类的路由，它将导航到BaseComponent，并且我可以添加逻辑以显示<app-feature-one></app-feature-one> 或 <app-feature-two></app-feature-two>仅在导航到“featureone”或FeatureTwoModule时加载FeatureOneModule 'featuretwo'？

4

2 回答 2

0

当您希望您BaseComponent出现在每条路线上时，您应该将其包含在您的 AppComponent 组件中：

<app-base></app-base>

如果特性组件需要显示为基础组件的兄弟，只需相应地放置路由器出口：

<app-base></app-base>
<router-outlet></router-outlet>

如果特性组件应该嵌套到 baseComponent 的某个部分，您可以使用内容投影：

<app-base>
  <router-outlet></router-outlet>
</app-base>

然后在您的 BaseComponent 中，使用ng-content：

<header></header>
  <ng-content></ng-content>
<footer></footer>
于 2020-09-10T15:38:01.957 回答
0

使用您当前的配置，因为{ path: '', component: BaseComponent },首先，无论您发出什么 url，它总是会解析为BaseComponent. Angular 通过执行 DFS 搜索来解析路由，并将在第一个 match 处停止，因此在定义路由时必须简洁。

解决此问题的一种方法是添加pathMatch: 'full'：

{ path: '', component: BaseComponent, pathMatch: 'full' },
...

它会抛出一个错误，如“初始化之前无法访问'FeatureOneModule'”

您收到此错误是因为app-feature-one和app-feature-two是属于延迟加载模块的组件，因此，除非您强制导入这些模块，否则您将无法使用它们。

有什么方法可以让我保留诸如“featureone”和“featuretwo”之类的路线......

解决此问题的一种快速方法是使用命名的 outlets：

const routes: Routes = [
  { 
    path: '', component: BaseComponent, pathMatch: 'full',
    children: [
       { path: 'featureone', loadChildren: () => import('./feature-one/feature-one.module').then(m => m.FeatureOneModule), outlet: 'feat-one' },
  { path: 'featuretwo', loadChildren: () => import('./feature-two/feature-two.module').then(m => m.FeatureTwoModule), outlet: 'feat2' },
   ]

  },
  { path: '**', redirectTo: '', pathMatch: 'full'}
];

那么，在你的base-component.component.html

<router-outlet name="feat-one"></router-outlet>

<!-- ... -->

<router-outlet name="feat-two"></router-outlet>

为了导航到其中一个（或同时导航到两者），您必须使用以下内容：

[routerLink]="[{ outlets: { 'feat-one': 'featureone' } ... }]"
于 2020-09-11T05:44:43.303 回答