Question

我已经实现了angular2路由并且它的工作完美。然后我得到了这个疯狂的想法，无法找到解决方案。

问题：我有 app.component.html 页面，其中包含导航栏和 jumbotron bootstrap元素。导航栏有两个链接，一个用于主页页面，另一个用于设置页面。我需要改变jumbotron 要显示的元素＆＃34; 您在主页＆＃34;单击主链接时从HomeComponent变量并显示＆＃34; 您位于“设置”页面＆＃34;单击设置链接时，从SettingsComponent变量。我知道它可能但不知道如何。

视觉表现：

df.iloc

这是我的代码：

app.component.html

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Darth</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a [routerLink]="['']" [routerLinkActive]="['active']">Home</a></li>
                <li><a [routerLink]="['settings']" [routerLinkActive]="['active']">Settings</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="jumbotron">
  <h1>Hello, world!</h1>
</div>

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>

任何建议都会有所帮助。谢谢。

我已将整个项目上传到

Answer 1

编辑：正确的方法是使用＆＃34; components communication through <router-outlet>＆＃34;

中概述的服务

一种简单但不那么干净的方法是通过侦听路由器事件来检测网址更改。

您的组件代码变为

import { Component } from '@angular/core';
import {Router, NavigationEnd} from "@angular/router";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  currentMessage:string = "Hello, World";
  constructor(private activeRoute:Router) {

  }
  ngOnInit() {
    this.activeRoute.events.subscribe(this.onUrlChange.bind(this))
  }

  onUrlChange(ev) {
    if(ev instanceof NavigationEnd) {
      let url = ev.url;
      if(url.indexOf('settings') != -1)  {
          this.currentMessage = "Settings";
      } else {
        this.currentMessage = "Home";
      }

    }
  }
}

你修改你的jumptron来阅读＆＃34; currentMessage＆＃34;变量

<div class="jumbotron">
  <h1>{{currentMessage}}</h1>
</div>

动态更改app.component中的HTML元素

1 个答案: