Question

场景：我有一个标题组件并且有一个登录页面组件。我想从login-page组件的header组件调用一个函数来根据你是否登录来更新头文件。

问题：有人可以解释一下我会怎么做吗？我尝试过使用@ViewChild但没有成功。此外，如果我以错误的方式解决这个问题，或许你可以通过更好的方式启发我？

干杯！

import ...

@Component({
    selector: 'header',
    templateUrl: '/views/header.html',
    directives: [ROUTER_DIRECTIVES],
})

export class Header {

    constructor() {

    }

    public updateRight() {
        alert("nope");
    }

}


import ...


@Component({
    selector: 'login',
    templateUrl: '/views/login.html',
    providers: [HTTP_PROVIDERS],
})

export class Login {
    @ViewChild(Header) header: Header;

    constructor(http: Http) {
    }

    onSubmit() {
        // call function to update header stuffs
        this.header.updateRight();
    }

}

main.ts模板

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

header.ts模板

<div id="header-wrap">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h3><strong><a [routerLink]="['/Home']">HomePage</a></strong></h3>
            </div>
            <div class="col-md-6">
            </div>
            <div class="col-md-3" style="text-align: right;">
                <a [routerLink]="['/Login']">Log In</a>
                <a [routerLink]="['/Register']">Sign Up</a>
            </div>
        </div>
    </div>
</div>

login.ts模板

<div class="container padme">
    login
</div>

Answer 1

实际上，您只能将@ViewChild用于包含在组件模板中的元素。如果你有类似的东西（假设选择器是Header组件是header），这适用：

@Component({
  (...)
  template: `
    <header></header>
  `
})
export class Login {
  @ViewChild(Header) header: Header;
  (...)
}

此外，相应的值在组件构造函数中不可用但稍后：

在调用ngAfterViewInit回调之前设置查看查询。

所以你可以像这样重构你的代码：

@Component({
  (...)
  template: `
    <header></header>
  `
})
export class Login {
  @ViewChild(Header) header: Header;

  ngAfterViewInit() {
    this.header.someFunction();
  }
}

如果你在这两个组件之间没有这种关系（我认为它就是这种情况 - 同一级别或不同组件树上的组件），你应该使用共享服务来制作它们通信。您可以利用observable来实现服务总线...

在此级别查看以下问题：

Angularjs2如何将函数从一个组件调用到另一个组件？

1 个答案: