在另一个导航组件中使用 Angular2 typescript 组件

Question

我有两个 Angular2 组件，一个“主要”和“另一个”。从“Main”，我导航到“Another”，它在其模板中引用了其他组件，例如以下模板示例：

<div>
    Some other templates and HTML...
    <person>Loading person...</person>
</div>

问题是person 组件如果以这种方式使用必须被引导，但是引导它会导致选择器匹配错误。这是有道理的，因为 HTML 模板尚未呈现。

如何才能做到这一点？

更新

这是一个示例代码：

主要

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

import {Another} from './Another';

@RouteConfig([
    { path: '/Another', name: 'Another', component: Another}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Main',
    template:
    '<div>
        <button type="button" (click)="navigate()">Navigate</button>
        <router-outlet></router-outlet>
    </div>'
})
export class Main {
    constructor(private _router: Router) { }

    navigate() {
        this._router.navigate(['Another']);
    }
}

另一个

import {Component} from 'angular2/core';

@Component({
    selector: 'Another',
    template:
    '<div>
        <h1>i'm another!</h1>

        <!-- how do I use this here? -->
        <person>Loading person...</person>
    </div>'
})
export class Another {

}

人物

import {Component} from 'angular2/core';

@Component({
    selector: 'person',
    template:
    '<div
        <h1>i'm person!</h1>
    </div>'
})
export class Person {

}

同样，如果我在根组件中引导 person，我将收到“选择器与元素不匹配”错误。

更新 2

将directives: [Person] 添加到“另一个”组件将导致以下错误：“预计不在 Angular 区域，但它是！”，但 'person' 的模板会呈现。

Answer 1

如果我正确理解你想要做什么，试试这个。

import {Component} from 'angular2/core';
import {Person} from 'path-to-person-component';

@Component({
    selector: 'Another',
    template:
    '<div>
        <h1>i'm another!</h1>

        <!-- how do I use this here? -->
        <person>Loading person...</person>
    </div>',
    directives: [Person]
})
export class Another {

}