Question

我有一个app组件，它的使用路由器插座，以及一个主要组件（在路由器插座上加载的是什么）现在我想将包放在我们可以插入小部件的组件中。

应用程序组件：

<cover></cover>

<div fxFlexFill fxLayout="row" fxLayoutAlign="stretch">
    <div fxFlex>
        <router-outlet></router-outlet>
    </div>
</div>

主要组成部分：

<app-header></app-header>

<main-widget></main-widget> //place where I would like to load custom content

<left-widget></left-widget>  //place where I would like to load custom content

<right-widget></right-widget>  //place where I would like to load custom content

主要组件来自coreModul （共享模块） - 这是一个框架我们无法在项目级别访问它。

所以我想把内容放到小部件中，但不知道该怎么做。

对我而言，最难的是如何将组件传递到路由器插座并将其显示在正确的位置。在这种情况下可以使用ng-templates吗？

修改

应用路由：

import { RouterModule, Routes } from '@angular/router';

import { 
    LoginComponent, 
    LoginGuard,
    MainComponent,
} from './../_system';

import { USERS_ROUTES, UsersComponent } from './../users';

const APP_ROUTES: Routes = [
    { path: 'login',  component: LoginComponent },
    { path: '', component:MainComponent, canActivate: [LoginGuard], children: [
        { path: 'users', children: USERS_ROUTES},
        { path: '', redirectTo: '/login', pathMatch: 'full'},
        { path: '**', redirectTo: '/questions'}
    ]}
];

export const AppRoutingModule = RouterModule.forRoot(APP_ROUTES);

如何将组件传递到路由器插座

0 个答案: