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

Posted 2023-02-22

【中文标题】Angular 2：使用数据手动引导组件不是根组件的一部分

【英文标题】：Angular 2: Manually bootstrap component not part of root component with data

【发布时间】：2016-06-14 14:32:34

【问题描述】：

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

例如，在 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]

【问题讨论】：

看起来您正在尝试类似github.com/angular/angular/issues/7136 或github.com/angular/angular/issues/915

来自更多的反应背景，这太疯狂了，这不可能而且容易。

【参考方案1】：

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

bootstrap(ComponentA);
bootstrap(ComponentB);

【讨论】：

有没有办法以这种方式将参数传递给它？该组件取决于模型实例。此外，如果能够指定运行它的 DOM 元素而不是运行整个 DOM，那就太好了。

它与组件中包含的选择器@Component(selector: 'comp-a', ...)“对抗”。您可以使用bootstrap(ComponentA, [provide(Config, useValue: new Config('someValue'))])中的提供者列表传递参数

grrr，不幸的是，它似乎没有正确初始化组件。即使我实例化了组件并为其设置了适当的值，在模板中，它也没有从组件实例中获取正确的公共属性。还在挖……

请添加代码来演示您的工作。我敢肯定，如果做得好，这会很好。

【参考方案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)

【讨论】：

仅供参考 DynamicComponentLoader 在 2.0 发布之前已被删除