각도 2 독립형 구성 요소

최근 Angular 2로 옮겨 갔고 이제는 거의 모든 부분에서 머리를 쓰려고합니다.각도 2 독립형 구성 요소

빌드해야하며 독립형 구성 요소 만 사용하므로 다음과 같이 구성 요소를 활용할 수 있어야합니다. 나는 이러한 구성 요소 선택기 중 하나가 내가 다음과 같은 콘솔 오류를 얻을 현재 페이지에없는 경우 문제가 페이지에 밖으로 렌더링하는 데 이러한 구성 요소를 점점 늘어나는만큼 가지고

<body> 
    <component-one></component-one> 
    <component-two></component-two> 
</body>

...

core.umd.js:2838 EXCEPTION: Error in :0:0 caused by: The selector "component-one" did not match any elements

관련 구성 요소 만 부트 스트랩하는 방법이 있습니까?

또한 "Angular 2가 개발 모드에서 실행 중이며 운영 모드를 사용하려면 enableProdMode()를 호출하십시오." 콘솔 메시지는 페이지에 얼마나 많은 구성 요소가 있는지에 따라 여러 번 나타납니다. 이는 내가 누락 된 것처럼 느껴지게합니다.

당신은 부트 스트랩 옵션 ngDoBootstrap() 직접 구현을 생략 할 수 있습니다

출처

2016-12-13 John williams

당신은 당신의 모듈 구성을 추가 할 수 있습니까? – yurzui

물론 @yurzui 지금 업데이트되었습니다. –

모듈 설정

// Modules 
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

// Components 
import { ComponentOne } from './components/componentOne'; 
import { ComponentTwo } from './components/componentTwo'; 


@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ComponentOne, ComponentTwo ], 
    bootstrap: [ ComponentOne, ComponentTwo], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule { 
    constructor() { 

}

}. 그리고 구성 요소를 조건부로 부트 스트랩하려면 appRef.bootstrap(SomeComponent);을 호출하기 전에 querySelector을 호출하여 해당 구성 요소가 이미 페이지에 있는지 확인하십시오.

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ ComponentOne, ComponentTwo ], 
    entryComponents: [ ComponentOne, ComponentTwo ] 
}) 
export class AppModule { 
    ngDoBootstrap(appRef: ApplicationRef) { 
    if(document.querySelector('component-one')) { 
     appRef.bootstrap(ComponentOne); 
    } 
    if(document.querySelector('component-two')) { 
     appRef.bootstrap(ComponentTwo); 
    } 
    } 
}

참고 :

<body> <component-one></component-one> </body>

Plunker Example
: entryComponents 옵션이 마지막으로 당신의 index.html을 당신이 두 번째 태그와 인상하지 않을 각도 오차를 생략 할 수 있습니다

필요합니다

메시지를 보지 않으려면 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode. 당신은 자극 모드를 활성화하거나 (내가 최초의 솔루션 사용하는 것이 좋습니다 ) 위와 같이 유사하다 (2.3.0 이후) 다음을 사용할 수 있습니다

@NgModule({ imports: [ BrowserModule ], declarations: [ ComponentOne, ComponentTwo ], entryComponents: [ComponentOne, ComponentTwo] }) export class AppModule { constructor(private resolver: ComponentFactoryResolver, private inj: Injector) {} ngDoBootstrap(appRef: ApplicationRef) { if(document.querySelector('component-one')) { const compFactory = this.resolver.resolveComponentFactory(ComponentOne); let compOneRef = compFactory.create(this.inj, [], 'component-one'); appRef.attachView(compOneRef.hostView); compOneRef.onDestroy(() => { appRef.detachView(compOneRef.hostView); }); } if(document.querySelector('component-two')) { const compFactory = this.resolver.resolveComponentFactory(ComponentTwo); let compTwoRef = compFactory.create(this.inj, [], 'component-one'); appRef.attachView(compTwoRef.hostView); compTwoRef.onDestroy(() => { appRef.detachView(compTwoRef.hostView); }); } appRef.tick(); } }

그것은 각 내부적 때 않는다는 것을 단지 동일합니다을 bootstraping 구성 요소

Plunker Example

도

,691,363보기 (210)
https://github.com/angular/angular/issues/11730

Angular2 - Component into dynamicaly created element

출처

2016-12-13 10:49:43 yurzui

하지만 아직 "각도 2가 개발 모드에서 실행 중입니다. 프로덕션 모드를 사용하려면 enableProdMode()를 호출하십시오." 부트 스트랩되는 각 구성 요소에 대해? –

단지 디버깅 정보 일뿐입니다.각 부트 스트랩 구성 요소 (https://github.com/angular/angular/blob/2.3.0/modules/%40angular/core/src/application_ref.ts#L449-L475)가 필요합니다. 뚜렷한 모드를 활성화하면 – yurzui

이 사라집니다. 따라서 각 구성 요소에 각도 코어의 새로운 인스턴스가 실행되지 않고 있습니까? –

각도 2 독립형 구성 요소

답변

관련 문제