Question

我正在玩Angular2中的组件交互。

坚持 -

Angular 2中水合/脱水的概念是什么？

如何在两个组件之间进行交互？如何调用不相关的组件方法（父子/兄弟）？

所以代码结构就像

我有一个AuthApp组件（由Angular2的Auth0提供支持）

 @Output() isUserLoggedIn: EventEmitter<string> =
    new EventEmitter<string>();

当用户成功登录isUserLoggedIn变量时，将发出true / false值。像这样 -

    login() {
        var self = this;
        this.lock.show({}, (err, profile, token) => {
            if (err) {
                alert(err);
                return;
            }
            // If authentication is successful, save the items
            // in local storage
            localStorage.setItem('profile', JSON.stringify(profile));
            localStorage.setItem('id_token', token);
            this.zoneImpl.run(() => this.user = profile);

            this.router.parent.navigate(["Dashboard"]);
//            this.isLoggedIn = true;
            self.isUserLoggedIn.emit("true");
        });
    }

在我的AppComponent中，我将AuthApp组件作为指令

传递

@Component({
    selector: 'my-app',
    templateUrl: './pages/main.html',
    directives: [ROUTER_DIRECTIVES, AuthApp]
})
@RouteConfig([
    { path: '/login', name: 'Login', component: AuthApp, useAsDefault: true },
    { path: '/dashboard', name: 'Dashboard', component: AppDashboardComponent },
    { path: '/friends', name: 'Friends', component: AppFriendsComponent }
])
export class AppComponent {
    pageTitle: string = "My Space";

    @Input() isLoggedIn;

    router: Router;

    tokenExpired = tokenNotExpired();

    constructor(router: Router) {
        this.router = router;
    }
}

我想在AppComponent的isLoggedIn变量中捕获AuthApp组件值。

模板中的

isLoggedIn变量将显示/隐藏登录/注销按钮。

执行 self.isUserLoggedIn.emit（＆＃34; true＆＃34;）; 功能后，我面临Attempt to use a dehydrated detector: HostAuthApp_0 -> isUserLoggedIn。

研究这个问题让我意识到变量已经脱离变化检测，因此抛弃了异常，但概念没有被清除。

此外，如果任何人可以共享任何活跃的Angular2社区/论坛链接，任何食谱都会有很大帮助。

谢谢。

组件交互导致尝试在Angular 2

0 个答案: