angular - 如何将值从 Angular 2 中的组件传递给 index.html-6ren

angular - 如何将值从 Angular 2 中的组件传递给 index.html

转载作者：太空狗更新时间：2023-10-29 17:50:12

我有一个 angular2 项目，其中 index.html 包含标题栏。其他组件将负责登录和显示其他内容。

我必须在标题栏中显示一个 Logo ，该 Logo 仅在用户登录时出现在 index.html 中。如果用户登录，我将在 app.component.ts 中设置一个标志。如何在 index.html 中引用该标志？

<body>
    <div class="content-body">
        <header class="header">
            <div class="header-bar container">
                <div class="header-bar__main">
                    <div class="header-heading">
                        <h1 class="page-title">noHold Application</h1>
                    </div>
                </div>
                <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a> // this line should be displayed only if user logs in.
            </div>
        </header>
        <div class="content">
            <div class="content__main">
                <div class="container">
                    <app-root>Loading... </app-root>        
                </div>
            </div>
        </div>
    </div>

</body>

app.component.ts

import { Component } from '@angular/core';

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

  static loggedIn = false;

  getLoggedIn() {
    return AppComponent.loggedIn;
  }

}

最佳答案

在 Angular 中，拥有一个 Bootstrap 组件(AppComponent 在许多情况下，以及在您的案例)，并定义其他组件(例如标题、菜单、页面内容、登录状态等)。

在这种情况下，我建议您修改app.component.html，并使用自己的选择器引入子组件。例如:

app.component.html

<header></header>
<router-outlet></router-outlet>

HeaderComponent 的内容使用 header 标记/选择器呈现，而导航组件(例如:AboutComponent)的内容使用 呈现code>router-outlet 标签/选择器。

header.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  public loggedIn = false;

  ...
}

header.component.html

  <header class="header">
    <div class="header-bar container">
      <div class="header-bar__main">
        <div class="header-heading">
          <h1 class="page-title">noHold Application</h1>
        </div>
      </div>
      <div *ngIf="loggedIn">
        <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a>
      </div>
    </div>
  </header>

希望对您有所帮助。

关于angular - 如何将值从 Angular 2 中的组件传递给 index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42924373/