H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端问题精选】angular2 子路由组件怎么改变其父路由组件的值?

pages.component.html

<!-- START HEADER -->
<header id="header" class="page-topbar">
    <!-- start header nav-->
    <div class="navbar-fixed">
        <nav class="navbar-color blue">
            <div class="nav-wrapper">
                <ul class="left">
                    <li><h1 class="logo-wrapper">
                        <a href="/" class="brand-logo darken-1">  
                            <span>{{title}}</span>
                        </a>
                    </h1></li>
                </ul>

            </div>
        </nav>
    </div>
    <!-- end header nav-->
</header>
<!-- END HEADER -->

<!-- START MAIN -->
<div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
        <!--路由插座-->
        <router-outlet></router-outlet>
    </div>
    <!-- END WRAPPER -->
</div>
<!-- END MAIN -->

路由

const routes: Routes = [
    {
        // path: 'pages',
        path: '',
        component: PagesComponent,
        children: [
            {path: 'home', component: HomeComponent},
            {path: 'moments', component: MomentsComponent},
            {path: 'moment/comments/:id', component: MomentsCommentComponent},
            {path: 'moment/detail/:id', component: MomentsDetailComponent},
            {path: 'happenings', component: HappeningsComponent},
            {path: 'happening/detail/:id', component: HappeningsDetailComponent},

            // {path: 'video/:url', component: VideoComponent}
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class PagesRoutingModule {
}

官网教程组件通信那章都是

 <hero-child *ngFor="let hero of heroes"
  //...
    </hero-child>

这种类型,不知道和我这种写法是不是差不多?
我想在所有子路由中(MomentsComponent,HappeningsComponent。。。)改变PagesComponent中的title值,该怎么做?

回答:

父路由、子路由之间插一层服务用于数据共享。
参考官网《组件通讯》

本文地址:H5W3 » 【前端问题精选】angular2 子路由组件怎么改变其父路由组件的值?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址