Angular 5 出口路由器出口以编程方式答案

【问题标题】：Angular 5 outlet router-outlet programmaticallyAngular 5 出口路由器出口以编程方式
【发布时间】：2018-06-28 21:06:46
【问题描述】：

我就是这种情况

在这个地址 localhost:4200/pathlvl1/pathlvl2 我有一个组件可以加载一个 HTML 页面，里面有一个路由器插座

<a [routerLink]="['./', {outlets: {'nameOutlet': ['test']}}]"> TEST </a>
<router-outlet name="nameOutlet"></router-outlet>

链接有效。

我会在组件中以编程方式使用此链接

import { Component, OnInit} from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';


@Component({
    selector: 'app-temp',
    templateUrl: './temp.component.html'
})
export class TempComponent implements OnInit {

    constructor(private router: Router ) {}

    ngOnInit(): void {
        this.router.navigate(['./', {outlets: {nameOutlet: ['test']}}]);
    }
}

但是有问题

我不认为是路由的问题，因为直接链接有效

这是错误

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“假”。当前值：'true'。

有什么建议吗？

【问题讨论】：

标签： angular5 outlet router-outlet

【解决方案1】：

我通过将路由器导航调用封装在 setTimeout 中解决了这个问题。

【讨论】：