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 url，这就是它工作的原因

Answer 2

使用* ngIf，this.showWelcome不会工作。对于数据绑定，您只需将其设置为* ngIf =＆＃34; showWelcome＆＃34;在您的HTML模板中

在Angular中使用* ngIf不起作用

2 个答案: