代码之家  ›  专栏  ›  技术社区  ›  SmartestVEGA

条件<router outlet>

  •  0
  • SmartestVEGA  · 技术社区  · 6 年前

    我在父页面上有一个路由器出口,显示“你好,世界!”

    <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>
    

    我要“你好,世界!”只显示父页而不显示在任何子页上的文本。但是其余的菜单项和页脚在所有子页面中保持不变。

    路线定义.ts

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

    是否可以做一个条件语句来显示“你好,世界!”在父页而不是在所有子页中?

    1 回复  |  直到 6 年前
        1
  •  1
  •   JB Nizet    6 年前

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