我必须在我的 app.component.ts 中,其中一个的名称是 name='popup':
@Component({
selector: 'app-main',
template: `<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>`
})
export class AppComponent implements OnInit {
public construnctor(){ }
ngOnInit(){ }
}
我的路线定义是:
export const myappRoute: Routes =[
{
path: '',
component : DataEntryComponent
},
{
path: 'templateModal',
component: TemplateModalComponent,
outlet: 'popup'
}
];
export const TemplateRoute: ModuleWithProvider = RouterModule.forChild(myappRoute);
当我尝试使用以下代码打开“templateModal”路由时:
<button type='submit' [routerLink]="['/' , {outlets: {popup : 'templateModal'}}]" replaceUrl="true"> open </button>
我收到一个错误,说无法将任何路由与 Url 段 templateModal 匹配。 我在 Angular 5 这是 StackBlitz 的尝试:https://stackblitz.com/edit/angular-n2eaje
最佳答案
use non-empty paths for your top level routes if auxilary(i.e. named) routes exist in a lazy loaded module.
<button type='submit' [routerLink]="['home', {outlets:{popup:['templateModal']}}]"> open </button>`
并将 templateUrl 替换为 template 因为您添加的是模板 View 而不是 URL
喜欢,
@Component({
selector: 'app-main',
template: `<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>`
})
这是更新的 Stackblitz
关于angular - 无法在不同的 socket 上打开路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52050336/