Question

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

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

index.html

app.component.ts

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

Answer 1

在Angular中，最佳做法拥有一个引导程序组件（ AppComponent在许多情况下，以及您的情况），并定义其他组件（，如标题，菜单＆＃39; s，页面内容，登录状态等）。

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

<强> app.component.html

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

使用HeaderComponent代码/选择器呈现header的内容，而使用AboutComponent代码/选择器呈现导航组件的内容（例如：router-outlet）。 / p>

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

希望它有所帮助。

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

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

2 个答案: