Angular 2：使用数据手动引导组件不是根组件的一部分

Question

我有一个组件，我想在主引导应用程序之外进行初始化和渲染。

例如，在 react 中，我可以这样做：

var div = document.createElement('div');
React.render(React.createElement(MyComponent, { }), div);

我希望能够在 Angular 2 中使用组件做类似的事情。

另外，我意识到从角度来说，这些组件也可能被视为指令。我不太确定在这种情况下是否应该使用指令或组件术语。

这是我现在正在做的示例代码（我已尝试尽可能减少）：

export interface Tweet {
  id: number;
  text: string;
}
@Component({
    selector: 'tweet',
    template: `
{{tweet.text}}
`,
    inputs: ['tweet']
})
export class TweetComponent {
  public tweet: Tweet;
}

// This works when in the context of another component's template like:
<tweet [tweet]="tweet"></tweet>

// code to manually initialize
var tweetEl = document.createElement('tweet');
var body = document.querySelector('body');
body.appendChild(tweetEl);
var comp = new TweetComponent();
comp.tweet = tweet;
bootstrap(TweetComponent, [provide(TweetComponent, {useValue: comp})]);

现在，它给了我以下错误：

异常：类型错误：无法读取未定义的属性“文本” TweetComponent 中的 {{tweet.text}}]

Answer 1

您可以运行两次引导程序。

bootstrap(ComponentA);
bootstrap(ComponentB);

Answer 2

在有人发布更好的答案之前，这是我现在做的非常老套的方法。

首先，将目标组件拆分为一个基本组件，然后是 2 个子组件，一个像原始组件，第二个具有这样的构造函数：

constructor(dcl: DynamicComponentLoader, elementRef: ElementRef) {
  this.data = elementRef.nativeElement.attributes['data'];
}

然后，手动引导组件::

var el = document.createElement('myselector');
el.attributes['data'] = data;
var body = document.querySelector('body');
body.appendChild(el);
bootstrap(MyComponent)