Question

我正在尝试学习Angular 2，所以我正在制作一些hello world个例子。这是我的代码：

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'

bootstrap(AppComponent, [DataService]);

的index.html

...
<body>
    <hello-world>Loading...</hello-world>
    <hello-world>Loading...</hello-world>
</body>
...

app.component.ts

import {Component} from 'angular2/core';
import {DataService} from './app.dataservice'

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{ item }}</h1>'
})

export class AppComponent {
    items: Array<number>;
    item: number;

    constructor(dataService: DataService) {
        this.items = dataService.getItems();
        this.item = this.items[0];
    }
}

app.dataservice.ts

export class DataService {
    items: Array<number>;

    constructor() {
        this.items = [1,2,3];
    }

    getItems() {
        return this.items;
    }
}

代码似乎工作正常，因为第一个hello-world自定义标记正在ts内的代码中正确显示。但是，第二个hello-world tag is not transformed。只显示一个自定义元素。

不能超过1个自定义标签吗？我怎么能这样做？

修改

我在app.components.ts

中添加了新导入

import {ByeWorld} from './app.byeworld';

并在 app.byeworld.ts

中

import {Component} from 'angular2/core';

@Component({
    selector: 'bye-world',
    template: '<h1>Bye World</h1>'
})

export class ByeWorld {
    constructor() {
    }
}

Answer 1

我测试了这个。您不能使用相同名称生成多个 Angular 2主要组件。但是你可以根据需要为非主要组件制作任意数量的组件。

主要和非主要成分如何区分？

主要组件是被引导的组件。

看一下屏幕截图。

我的主要成分叫做：我在HTML中做了两次：

<body>
  <my-app>Loading...</my-app>
  <my-app>Loading...</my-app>
</body>

正如您所看到的，图片底部的末尾有一个loading。

但，适用于非主要组件。如您所见，my-hero-detail组件可以尽可能多地创建。

<div class="center-align">
<h1>{{title}}</h1>
</div>
<div class="row" style="margin-bottom: 0;">
    <div class="col s12 m6">
        <div id="my-heroes" class="card">
            <div class="card-header">
                <span>My Heroes</span>
            </div>
            <div class="card-content">
                <ul class="heroes">
                    <li *ngFor="#hero of heroes" 
                        (click)="onSelect(hero)"
                        [class.selected]="hero === selectedHero">
                        <span class="badge">{{hero.id}}</span> {{hero.name}}
                    </li>
                </ul>   
            </div>
        </div>      
    </div>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
<div class="row">
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>

我的英雄细节组件：

import {Component} from 'angular2/core';
import {Hero} from '../hero';
@Component({
    selector: 'my-hero-detail',
    templateUrl: 'app/hero-detail/hero-detail.html',
    inputs: ['hero'],
})

export class HeroDetailComponent {
    public hero: Hero;
}

Answer 2

正如标准HTML页面应该有一个<body>内容标记和一个<head>标记用于'元数据'一样，Angular2应用程序应该有一个根标记。要使应用程序工作，您必须初始化它（告诉Angular它是一个应用程序），然后通过调用bootstrap()函数来实现。

如果您的根标记（例如<app>）位于正文中，则可以将选择器从自定义标记app更改为标准标记body。如果您以root身份添加不同的组件，请执行以下操作：

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'

@Component({
  selector: 'body',
  directives: [AppComponent],
  template: `
    <hello-world>Loading...</hello-world>
    <hello-world>Loading...</hello-world>
  `
})
class RootComponent {}

bootstrap(RootComponent, [DataService]);

...其余的代码应该可以运行。

当然，如果您的HTML中需要其他内容（非应用内容或其他有角度的应用），则不会选择body作为Angular2应用的根选择器。

希望这有助于您更好地理解事物......

Answer 3

如果您遇到这个问题而且确实需要两个根级应用实例，可以通过在NgModule ngDoBootstrap方法中手动引导根级别组件来实现。

（请注意，在Angular 5+中可能不再需要此方法，请参阅this Angular PR）

我们首先找到我们想要引导的所有根元素，并为它们提供唯一的ID。然后，对于每个实例，使用新ID攻击组件工厂选择器并触发引导程序。

const entryComponents = [
  RootComponent,
];

@NgModule({
  entryComponents,
  imports: [
    BrowserModule,
  ],
  declarations: [
    RootComponent,
  ],
})
export class MyModule {
  constructor(private resolver: ComponentFactoryResolver) {}

  ngDoBootstrap(appRef: ApplicationRef) {
    entryComponents.forEach((component: any) => {
      const factory = this.resolver.resolveComponentFactory(component);
      let selectorName;
      let elements;

      // if selector is a class
      if (factory.selector.startsWith('.')) {
        selectorName = factory.selector.replace(/^\./, '');
        elements = document.getElementsByClassName(selectorName);

      // else assume selector is an element
      } else {
        selectorName = factory.selector;
        elements = document.getElementsByTagName(selectorName);
      }

      // no elements found, early return
      if (elements.length === 0) {
        return;
      }

      // more than one root level componenet found, bootstrap unique instances
      if (elements.length > 1) {
        const originalSelector = factory.selector;

        for (let i = 0; i < elements.length; i += 1) {
          elements[i].id = selectorName + '_' + i;
          (<any>factory).factory.selector = '#' + elements[i].id;
          appRef.bootstrap(factory);
        }

        (<any>factory).factory.selector = originalSelector;

      // only a single root level component found, bootstrap as usual
      } else {
        appRef.bootstrap(factory);
      }
    });
  }
}

现在，假设我们的RootComponent的选择器是＆＃39; .angular-micro-app＆＃39;这将按预期工作：

<body>
    <div class="angular-micro-app"></div>
    ...
    <div class="angular-micro-app"></div>
</body>

实例Angular 2组件两次

3 个答案:

主要和非主要成分如何区分？