2

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

例如，在反应中，我可以做这样的事情：

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})]);

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

例外：TypeError：无法读取 TweetComponent 中 {{tweet.text}} 中未定义的属性“文本”]

4

2 回答 2

0

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

bootstrap(ComponentA);
bootstrap(ComponentB);
于 2016-03-01T23:06:03.743 回答
0

在有人发布更好的答案之前，这是我现在真正的hacky方式。

首先，将目标组件拆分为一个基本组件，然后是 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)
于 2016-03-03T02:10:31.977 回答