angular – 在嵌套子组件中使用辅助路径

发布时间：2020-12-17 18:05:36 所属栏目：安全来源：网络整理

导读：我试图在一个子组件中使用 Auxiliary Routes,类似于 here发布的问题.由于发布的“解决方案”更像是一种解决方法,我很好奇如何在上面的博文中做到这一点. 我在路由器3.1.2中使用Angular 2.1.2. parent.module import { NgModule } from '@angular/core';impor

我试图在一个子组件中使用 Auxiliary Routes,类似于 here发布的问题.由于发布的“解决方案”更像是一种解决方法,我很好奇如何在上面的博文中做到这一点.

我在路由器3.1.2中使用Angular 2.1.2.

parent.module

import { NgModule }             from '@angular/core';
import { RouterModule }         from '@angular/router';
import { BrowserModule }        from '@angular/platform-browser';

import { ParentComponent }      from './parent.component';

import { ChildModule }          from '../child/child.public.module';
import { ChildComponent }       from '../child/child.public.component';

import { OtherModule }          from '../other/other.public.module'


@NgModule({
    imports: [
        ChildModule,OtherModule,RouterModule.forRoot([
            { path: '',component: ChildComponent }
        ])
    ],declarations: [ ParentComponent ],bootstrap:    [ ParentComponent ]
}) 

export class ParentModule { }

parent.component

import {Component} from '@angular/core';

    @Component({
        selector: 'my-app',template: '<router-outlet></router-outlet>'
    })

export class ParentComponent{ }

child.module

import { NgModule }             from '@angular/core';
import { RouterModule}          from '@angular/router';
import { CommonModule }         from '@angular/common';

import { ChildComponent }       from './child.public.component';

import { OtherComponent }       from '../other/other.public.component'

@NgModule({
    imports: [
        CommonModule,RouterModule.forChild([
            {path: 'other',component: OtherComponent,outlet: 'child'}
        ])
    ],declarations: [ ChildComponent ],exports:    [ ChildComponent ],})
export class ChildModule { }

child.component

import { Component } from '@angular/core';

@Component({

    selector: 'child-view',template: '<router-outlet name="child"></router-outlet>',})

export class ChildComponent{}

所以,当我尝试浏览/(child：other)时,我会得到典型的：

错误

Cannot find the outlet child to load 'OtherComponent'

解决方法

我觉得那里有点混乱.

我们来看看父路线：

>唯一可用的路径是路径：“”将加载child.component

对于儿童路线

>这是在child.module中,父模块根本没有加载它.

我先尝试一些事情：
– 将指定的插座添加到parent.component
– 添加到父路由中其他组件的路由

看看它是否有效.一旦你得到它……

>在主路径中执行以下操作来加载child.module：

{path：’child’,loadChildren：’app / child.module#ChildModule’}
>子路径的示例：

{path：’other’,component：OtherComponent,outlet：’side’}

然后你可以这样浏览：

/儿童/(方：其他)

如果你想尝试一下,我在这里有一个有效的例子：
https://github.com/thiagospassos/Angular2-Routing

干杯

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!