Question

我想问一下如何在基于令牌成功登录后，将标题的内容更改为例如从登录文本更改为注销。我的布局结构是我有一个Main-Layout.component：

<app-header></app-header>
<div class="main-view">
    <router-outlet></router-outlet>
</div>

具有Home和Login组件的子组件。路线是这样的：

path: '',
        component: MainLayoutComponent,
        children: [
            { path: 'login', component: LoginComponent },
            { path: '', component: HomeComponent },
        ]

内容是：

<ul class="nav navbar-nav navbar-right" *ngIf="!isLoggedIn">
                <li><a [routerLink]="['/login']">Log in</a></li>
                <li><a [routerLink]="['/signup']" class="btn btn--red">Sign up</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn">
                <li><a (click)="logout()">Logout</a></li>
            </ul>

export class HeaderComponent implements OnInit {

    public isLoggedIn: boolean;

    constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) {
        this.isLoggedIn = this.authenticationService.isLoggedIn();

    }

我的问题是当我从登录页面重定向到主页时，因为两个组件托管在同一个Main-Layout.component上，重定向后不再渲染，所以header.component教练上的this.isLoggedIn = this.authenticationService.isLoggedIn();不再读了。

Answer 1

构造函数只会被调用一次（isLoggedIn将被分配一个值并在之后保持不变）。要解决此问题，请将isLoggedIn替换为get函数。例如

import java.util.regex.*;
public class AddtheNumbers {

    public static void main(String[] args) {
       Pattern p = Pattern.compile("-?\\d+");
       Matcher m = p.matcher("bajsd 7 jns 87 5");
       while (m.find()) {
         System.out.println(m.group());
       }
    }
}

在HTML中

public isLoggedIn() {return this.authenticationService.isLoggedIn();}

或者直接参考服务（不是很好的做法？）

...*ngIf="!isLoggedIn()"

更改同一组件中的标题内容 - Angular 2

1 个答案: