logo标签列表

如何从Angular 2组件向index.html传递一个值

angulartypescript
4

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

如果用户已登录，我需要在头部栏中显示一个标志，该标志仅存在于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;
  }

}
2个回答
4
在Angular中，最佳实践是创建一个单一的引导组件(在许多情况下是AppComponent，在您的情况下也是如此)，并定义其他组件(如页眉、菜单、页面内容、登录状态等)。
因此，我建议您修改app.component.html文件，并使用它们自己的选择器引入子组件。例如:

app.component.html

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

HeaderComponent的内容使用header标签/选择器进行渲染，而导航组件（例如：AboutComponent）的内容使用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>

希望这对你有所帮助。
2
请注意不要将组件耦合在一起。一个组件不应该访问另一个组件的属性。 有很多方法可以解耦组件。在您的情况下，一个好的选择可能是在组件之间共享公共数据。
这里是一个快速实现的示例。 创建一个表示用户的类：
class User {
  firstName: string;
  lastName: string;
  ...
}

创建一个包含用户会话状态的类：
class Session {
  user: User;
  isLogged: boolean;

  login(user: User) {
    this.user = user;
    this.isLogged = true;
  }
}

然后您需要配置应用程序模块，将 Session 类的实例作为单例注入：
@NgModule({
  ...
  providers: [
    ...
    { provide: 'session', useValue: new Session() },
    ...
  ],
  ...
})

现在在您的所有组件中，都可以注入您的会话。例如，在登录组件中，当用户进行身份验证时设置用户：
@Component({
  ...
})
class LoginComponent {
  constructor(private session: Session) {
  }

  private login() {
    let user = ....;  // Retrieve user from backend service...
    this.session.login(user);
  }
}

同时，您还可以在模板中使用会话：

<div *ngIf="session.isLogged">
  <a class="btn btn--small btn--icon ng-scope" title="Logout"><span class="icon-sign-out"></span></a>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接