Fatal编程技术网
  • angular/
  • 如何将值从angular 2中的组件传递到index.html

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

angular typescript

如何将值从angular 2中的组件传递到index.html,angular,typescript,Angular,Typescript,我有一个angular2项目，index.html包含标题栏。其他组件将负责登录和显示其他内容 我必须在标题栏中显示一个徽标，只有当用户登录时，该徽标才会出现在index.html中。如果用户登录，我正在app.component.ts中设置一个标志。如何在index.html中引用该标志 <body> <div class="content-body"> <header class="header"> <

我有一个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>
在Angular中，拥有一个引导组件（
AppComponent
，在许多情况下，以及在您的情况下）并定义其他组件（如标题、菜单、页面内容、登录状态等）是最佳实践

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

app.component.html

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

  <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>
header.component.html

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

  <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>


不保留申请
希望能有所帮助。

注意不要将组件耦合在一起。组件不应访问其他组件的属性。 有许多方法可以解耦组件。在您的情况下，一个好的选择可能是在组件之间共享公共数据

下面是一个实现的快速示例。 创建表示用户的类：

class User {
  firstName: string;
  lastName: string;
  ...
}
创建包含用户会话状态的类：

class Session {
  user: User;
  isLogged: boolean;

  login(user: User) {
    this.user = user;
    this.isLogged = true;
  }
}
然后，配置应用程序模块以将会话类的实例作为单例注入：

@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>