CODEWITHSUNDEEP
angular5outletrouter-outlet
teoooo78
teoooo78

Reputation: 19

Angular 5 outlet router-outlet programmatically

I'm in this situation

At this address localhost:4200/pathlvl1/pathlvl2 I've a component which loads an HTML page with a router-outlet inside

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

link works.

I would use this link programmatically in the component 

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']}}]);
    }
}

but there's something wrong

i don't think is a routing's problem 'cause direct link works

here's the error

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

any suggestions?

Upvotes: -1

Views: 997

Answers (1)

Potray
Potray

Reputation: 1998

I solved this by encapsulating the router navigation call inside a setTimeout.

Upvotes: 0

Related Questions