命名的页面路由器出口中的子路由不起作用

时间:2020-07-02 08:10:25

标签: javascript angular angular-routing

在我的项目设置中,我想使用命名的插座,并且部分使用它应有的功能,但是一个导航命令只是重定向我,而我无法弄清楚问题出在哪里...

app-routing.module.ts:

const routes: Routes = [
    { path: "", component: AnmeldungComponent },
    { path: "system", component: ListeSystemComponent },
    {
        path: "monitorliste",
        component: ListeMonitorComponent,
        children: [
            {
                path: "messwerte/:id",
                component: DatenMonitordatenComponent,
                outlet: "messwerteRouterOutlet"
            },
            {
                path:
                    "messwertverlauf/:schwelleAlert/:schwelleGut/:schwelleWarn/:schwelleRichtung/:id",
                component: MesswertverlaufComponent,
                outlet: "messwerteverlaufRouterOutlet"
            },
        ],
    },

    { path: "settings", component: SettingsComponent },
];

liste-monitor.component.html:

*some html code*
 <Label row="0" col="0" class="ListViewElement" [text]="monitorListeElem.name" textWrap="true"  (tap)="onItemTap(monitorListeElem)"></Label>
<page-router-outlet name="messwerteRouterOutlet"></page-router-outlet>
*some html code*
<Label row="1" col="1" class="fa ListViewElement" text="&#xf107;" (tap)="onArrowTap(monitorListeElem)"></Label>
                <page-router-outlet name="messwertverlaufRouterOutlet"></page-router-outlet>
*some html code*

在以下代码中执行导航:
liste-monitor.component.ts:

ngOnInit(){
this.routerExt.navigate([{outlets: {messwerteRouterOutlet: ['messwerte',this.curMonitor.id ], messwertverlaufRouterOutlet: ['messwertverlauf', this.curMonitor.schwelleAlert,this.curMonitor.schwelleGut, this.curMonitor.schwelleWarn, this.curMonitor.schwelleRichtung, this.curMonitor.id]}}], {relativeTo: this.route,})
}  

onItemTap(currentMonitorListeElem: MonitorListeElement){
        let id = currentMonitorListeElem.id.toString();
        console.log(id);
        
        this.routerExt.navigate([{outlets: {messwerteRouterOutlet: ['messwerte',id]}}], {relativeTo: this.route, transition: {name: 'slideLeft'}});
    }

ngOnInit中的功能是否必要?我真的很绝望,所以我基本上尝试了可以​​在任何地方找到的所有东西...

所以问题是:当我单击liste-monitor.component.ts中的项目时,我会重定向到liste-monitor.component.ts ...

0 个答案:

没有答案