在Angular中使用* ngIf无法正常工作

Question

我是Angular的新手，所以我在尝试一些我认为很基础的事情。

我有一个具有以下html的组件：

<div *ngIf="this.showWelcome" class="popup-modal-wrap">
    <h3>Hi {{this.currentUser.firstName}}, welcome!</h3>
    <a (click)="this.showWelcome = false" class="button naked">Close</a>
</div>

组件本身看起来像这样：

export class HomeLayoutComponent implements OnInit {

    showWelcome = false;

    public currentUser: LoggedInUser;

    constructor(private userService: UserService, private router: Router) {
    }

    ngOnInit() {
        if (this.router.url == '/welcome') {
            this.userService.getCurrentUser()
                .subscribe(
                    currentUser => {
                        this.currentUser = currentUser;
                        this.showWelcome = true;
                    },
                    error => {
                        console.log(error);
                    }
                );
        }
    }
}

此代码无效，不显示弹出窗口。 看来，一旦将showWelcome设置为true，它就不会执行任何操作，因为页面已经呈现。

以下代码可以正常工作：

if (this.router.url == '/welcome') {
    this.showWelcome = true;
}      

所以我确定我正在处理某种异步问题

Answer 1

问题是当我从注册页面进入时，this.router.url被设置为旧路由，而不是新路由。

测试时，我直接进入/ welcome网址，这就是为什么它起作用的原因

Answer 2

使用* ngIf，this.showWelcome将无法正常工作。 对于数据绑定，您只需在HTML模板中将其作为* ngIf =“ showWelcome”