好的，我要试一试...
路线
可以通过多种方式创建路线。您可以使用子路由或直接为组件提供服务。
如果您想直接提供组件，这将是理想的，
{ path: '*pathInURL*', component: *NameComponent* }
您面临的直接问题
三个问题，
将组件显示为子组件。
在名为 fullwidth 的模板中显示组件
在名为 mediumwidth 的模板中显示组件
在你的 routes.ts
const APP_ROUTES: Routes = [
// landing page of your application
{ path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
{ path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
{ path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
{ path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];
这将转发 URL 中的所有路径以查找这些路由。它将检查路线以查看它将落入哪个模板。
然后创建 3 个目录。
/空白
/完整
/中等
在这些文件夹中，您将保留使用每个母模板的组件。
所以由于登录是空白的。它会在 /blank
/blank/BlankComonent.ts
您还将在每个目录中创建一个路由文件，该文件在我们已经创建的初始路由文件中引用。
/blank/blank.routes.ts
export const BLANK_ROUTES: Routes = [
{ path: 'login', component: LoginComponent }
];
然后在中等同样的事情，
/blank/blank.routes.ts
export const MEDIUM_ROUTES: Routes = [
{ path: 'Some/Path', component: SomeMediumComponent }
];
FULL_ROUTES 也是如此
为我们创建的每个目录创建一个路由文件。添加所有位于同一目录中并共享同一母模板的路由。
然后我们将创建一个模板目录。称之为/布局
现在在该目录中，您将在此处创建
空白组件.ts
全组件.ts
中组件.ts
这些组件中的每一个都将在这些模板中提供相应的路由。因为请记住我们的第一个routes 文件说我们将为这些templates 提供所有Child Routes。
因此布局将提供给router-outlet
import { Component } from '@angular/core';
@Component({
selector: 'body',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {
}