Javascript 实例角度2组件两次_Javascript_Typescript_Angular

Javascript 实例角度2组件两次

javascript typescript angular

Javascript 实例角度2组件两次,javascript,typescript,angular,Javascript,Typescript,Angular,我正在学习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]); import {

我正在学习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]);

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

export class DataService {
    items: Array<number>;

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

    getItems() {
        return this.items;
    }
}

import {Component} from 'angular2/core';

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

export class ByeWorld {
    constructor() {
    }
}

index.html

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

以及在app.byeworld.ts中

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

bootstrap(AppComponent, [DataService]);

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

export class DataService {
    items: Array<number>;

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

    getItems() {
        return this.items;
    }
}

import {Component} from 'angular2/core';

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

export class ByeWorld {
    constructor() {
    }
}

从'angular2/core'导入{Component}；
@组成部分({
选择器：“再见世界”，
模板：“再见世界”
})
导出类ByeWorld{
构造函数（）{
}
}

我已经测试过了。不能使用相同的名称制作多个两个主要组件。但是，您可以为非主要组件制作任意数量的组件

如何区分主成分和非主成分？主组件是被引导的组件

看一下屏幕截图。

我的主要组成部分是：我在HTML中做了两次：

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

我的英雄细节组件：

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

正如标准HTML页面应该有一个内容标签和一个元数据标签一样，Angular2应用程序应该有一个根标签。要使应用程序正常工作，您必须初始化它（告诉Angular它是一个应用程序），然后通过调用

bootstrap（）

函数来实现

如果您的根标记（例如

）在主体内，这会让您感到不安，您可以将选择器从自定义标记

应用程序

更改为标准标记

主体

。如果将不同的组件添加为根，如下所示：

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

从'angular2/platform/browser'导入{bootstrap}
从'angular2/core'导入{Component}；
从“./app.component”导入{AppComponent}
从“./app.DataService”导入{DataService}
@组成部分({
选择器：'主体'，
指令：[AppComponent]，
模板：`
加载。。。
加载。。。
`
})
类根组件{}
引导（RootComponent，[DataService]）；

…您的其余代码应该可以工作

当然，如果HTML中需要其他内容（非应用程序内容或其他角度应用程序），则不会选择

body

作为Angular2应用程序的根选择器

希望这有助于您更好地理解问题…

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

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

我们首先找到要引导的所有根元素，并给它们一个唯一的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);
      }
    });
  }
}

const entryComponents=[
根组件，
];
@NGD模块({
入口组件，
进口：[
浏览器模块，
],
声明：[
根组件，
],
})
导出类MyModule{
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
ngDoBootstrap（appRef:ApplicationRef）{
entryComponents.forEach（（组件：any）=>{
const factory=this.resolver.resolveComponentFactory（组件）；
让我们选择名称；
让元素；
//如果选择器是一个类
if（factory.selector.startsWith（'.'））{
selectorName=factory.selector.replace（/^\./，“”）；
elements=document.getElementsByClassName（selectorName）；
//否则，假定选择器是一个元素
}否则{
selectorName=factory.selector；
elements=document.getElementsByTagName（selectorName）；
}
//未找到元素，请提前返回
if（elements.length==0）{
返回；
}
//找到多个根级组件集，引导唯一实例
如果（元素长度>1）{
const originalSelector=factory.selector；
for（设i=0；i


现在，假设我们的RootComponent的选择器为“.angular micro app”，这将按预期工作：
<body>
    <div class="angular-micro-app"></div>
    ...
    <div class="angular-micro-app"></div>
</body>


...
是的，但我想插入相同的自定义标记，两次这是您的主要组件吗？@ShaohaoLin我在2.0.0-beta.1
版本中也遇到了同样的问题。。看起来干瘪的。它在页面上引导应用程序一次。。忽略了其他元素标记。我猜bootstrap（）
只引导它找到的第一个实例。也就是说，在同一个应用程序中不能有两个根组件，这是有道理的，因为Angular1构建了一个组件树，而这棵树不能有两个根。@Pablo我认为我们的应用程序中可以有多个主组件，但它们应该有不同的名称。。就像Angular1有能力有多个应用程序（规则是根组件不应相互嵌套）如何区分主组件和非主组件？引导的组件是主组件。正确吗？您能提供一个我的英雄详细信息组件的示例吗？@Pankaj Parkar是的，主组件是一个bootstrapped@PankajParkar真的吗？你能提供一个例子吗？相同的根组件或引导两个不同的组件作为主组件？分别引导两个组件作为主组件。它们没有任何层次结构。我在下面陈述，但在根标记内，我可以添加新的自定义标记吗？比如，我可以在根元素内呈现自定义标记“tag”两次吗？我怎么做？一旦应用程序初始化/引导，你可以在其中使用你的组件Angular将在每次找到您指定的选择器时创建组件的实例（不必是标记-可以是类、id或任何其他选择器）。在您的示例中，AppComponent具有选择器：“hello world”
，因此将为每个
标记创建一个实例…是的，但请检查问题的最后一部分