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}} で undefined のプロパティ 'text' を読み取れません]

4

2 に答える 2

0

ブートストラップを 2 回実行できます。

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

誰かがより良い答えを投稿するまで、これが私の本当にハックな方法です。

まず、ターゲット コンポーネントをベース コンポーネントに分割し、次に 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 に答える