角4：承諾後動態添加路由

我想打電話已經在我AppComponent角4：承諾後動態添加路由

這裏ngInit已經完成後，配置我的路線是我app.component.ts

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    entryComponents: [ 
    DummyComponent 
    ] 
}) 
export class AppComponent { 
    routesLoaded: boolean = false 
    constructor(private router: Router) { 
     myCall().subscribe(() => { 
      router.resetConfig([ 
       { 
        path: '', redirectTo: '/dummy', pathMatch: 'full' 
       }, 
       { 
        path: 'dummy', component: DummyComponent 
       }] 
      ) 
      this.routesLoaded = true 
     }) 
    } 
}

，並在我的應用程序.component.html

<div *ngIf="routesLoaded"> 
    <router-outlet></router-outlet> 
</div>

它不工作，我有以下錯誤：

core.es5.js:1020 ERROR Error: Uncaught (in promise): [object Object] 
    at resolvePromise (zone.js:824) 
    at resolvePromise (zone.js:795) 
    at zone.js:873 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) 
    at Object.onInvokeTask (core.es5.js:3881) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) 
    at drainMicroTaskQueue (zone.js:602) 
    at <anonymous>

我試圖做的是可行的嗎？或者我錯過了什麼？如果我在呼叫之外移動router.resetConfig，它工作得很好。

來源

2017-10-15 Scipion

-1

你應該使用警衛（canActivate）。 resetConfig應該在獲得路線之前被呼叫（在門衛中）。

來源

2017-10-15 13:52:14 YairTawil

我有點糊塗了，我應該怎麼守護在這裏，因爲我沒有任何的路線設置了多少？ – Scipion

你說得對。我的錯。你導入了RouterModule.forRoot（[]）嗎？如果你在ngOnInitit上調用resetConfig將會正常工作。你可以使用APP_INITIALIZER提供程序來解決承諾 – YairTawil

我不知道APPI_INITIALIZER。我今晚要去一趟！ – Scipion

您應該立即撥打resetConfig的ngOnInit函數。

您可以使用APP_INITIALIZER提供程序來解決承諾（在模塊初始化之前）。例如：

providers: [ 
    DataService, 
    { 
    provide: APP_INITIALIZER, 
    useFactory: factory, 
    deps: [DataService], 
    multi: true 
    }],

和factory功能與myCall承諾：

export function factory(dataService: DataService) { 
    return() => dataService.myCall().then((_result) => { 
    dataService.myCallResult = _result; 
    }) 
}

ngOnInit將調用承諾解決後。

ngOnInit() { 
    this.myCallResult = this.dataService.myCallResult; //promise result 
    this.router.resetConfig([ 
     { 
     path: '', redirectTo: '/dummy', pathMatch: 'full' 
     }, 
     { 
     path: 'dummy', component: DummyComponent 
     } 
    ]); 
    }

這裏查看我的例子：

https://stackblitz.com/edit/angular-bu8evj?file=app%2Fapp.component.html

來源

2017-10-16 06:46:34 YairTawil

角4：承諾後動態添加路由

回答

相關問題