条件 <router-outlet>

Question

我在父页面上有一个路由器插座，显示"Hello World!"

<base href="/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<body style="height: auto; min-height: 100%;"  class="skin-blue sidebar-mini">
        <div id="wrapper">
            <app-header></app-header>
            <app-menubar></app-menubar>
        <div class="content-wrapper" style="min-height:92vh">
            <section id="MainContent" >
            <div class="content container-fluid body-content" style="background-image: url('./assets/Images/bg.jpg'); min-height: 615px;">
                <router-outlet>

                  Hello World! 

                </router-outlet>
            </div>
            </section>
         </div>
            <footer class="main-footer navbar-fixed-bottom">
                    <div class="col-sm-12 text-center pull-left">

                        <small > Version 1.0</small>
                     </div>
            </footer>
        </div>
</body>

我希望 "Hello World!" 文本仅出现在父页面上，而不出现在任何子页面上。但是其余的菜单项和页脚在所有子页面中保持不变。

路线-definations.ts

 { path:'parentPage',component:MasterComponent, canActivate:[AuthGuard],
    children:[
        { path:'ChildPage1',component:ChildPage1Component},
        { path:'ChildPage2',component:ChildPage2Component},
           ]
    },

是否可以做一个条件语句在父页面显示 "Hello world!" 而不是在所有子页面显示？

Answer 1

从路由器出口中删除 Hello World，并简单地添加一个新的子路由，路径为空，以及一个显示 hello world 的组件：

{ 
  path: 'parentPage', 
  component: MasterComponent, 
  canActivate:[AuthGuard],
  children: [
    { path: '', component: SomeComponentDisplayingHelloWorld },
    { path: 'ChildPage1', component:ChildPage1Component },
    { path: 'ChildPage2', component:ChildPage2Component },
  ]
}

条件 <router-outlet>

Conditional <router-outlet>

angular

typescript

angular-ui-router

angular-router