动态更改app.component中的HTML元素 [英] Change a HTML element in app.component dynamically

问题描述

我已经实现了angular2路由及其完美的工作方式.然后我有了这个疯狂的想法，却找不到解决方案.

I have implemented angular2 routing and its working perfect. Then i got this crazy thought and couldn't find a solution for that.

问题:我有一个 app.component.html 页面，其中包含导航栏和一个 jumbotron 引导程序元素.导航栏有两个链接，一个链接用于 home 页面，另一个用于设置 页面.我需要换个超大号 单击主页链接时从HomeComponent变量显示"您在主页上"的元素 并在单击设置链接时从SettingsComponent变量显示"您正在设置页面". 我知道有可能，但不知道如何.

Question: I have an app.component.html page with a navbar and a jumbotron bootstrap element. The navbar has two links, one for home page, and the other for settings page. I need to change the jumbotron element to display "You are in Home page" from the HomeComponent variable when home link is clicked and display "You are in Settings page" from the SettingsComponent variable, when settings link is clicked. I know its possible but don't know how.

视觉表现形式:

这是我的摘录:

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>

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

Any advice would be helpful. Thank you.

我已将整个项目上传到我的github存储库

I have uploaded the entire project in my github repo here

推荐答案

正确的方法是使用"

The proper way of doing it is to use services as outlined in "components communication through <router-outlet>"

一种简单但不太干净的方法是通过侦听路由器事件来检测URL更改.

One simple but not-so-clean way of doing it is to detect url changes by listening on router events.

您的组件代码变为

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以读取"currentMessage"变量

And you modify your jumptron to read the "currentMessage" variable

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

这篇关于动态更改app.component中的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！