구성 요소를 독립적으로 동적으로 각도 2로로드하십시오.

Question

두 개의 구성 요소 A와 B가 있습니다. 응용 프로그램을 시작할 때 div가 페이지에서 슬라이드하고 구성 요소 A가 div의 부분 뷰를 통해로드됩니다. 구성 요소 A의 템플릿에서 버튼을 클릭하면 다른 div가 슬라이드됩니다. 이 div에 컴포넌트 B를 표시하고 싶습니다. 어떻게 이것을 달성합니까? 라우팅을 라우팅으로 사용할 수 없다는 것은 두 구성 요소를 모두 상위 구성 요소 아래에 배치해야 함을 의미합니다. 이 두 구성 요소가 서로 독립적이지만 다른 구성 요소의 동일한 페이지에 계속 존재하기를 바랍니다.

기본적으로 색인 페이지에서 시작하는 MVC 구조가 있습니다. 인덱스 페이지 부분보기 Home.cshtml Home.cshtml->

<app1> 
 
    Loading 
 
    </app1>

또한

인덱스 페이지 부분도 포함 Contacts.cshtml 다른 DIV를 가진다 포함 DIV있다. Contacts.cshtml-는>

<app2> 
 
    Loading.. 
 
</app2>

은 모두 div의 서로 옆에 있습니다. 동일한 페이지의 다른 div에 두 구성 요소를 동시에로드하는 방법은 무엇입니까? 두 템플릿 모두 일부 텍스트 만 표시합니다.

Answer 1

당신은 쉽게에 공유 서비스를 사용할 수있게 이러한 방법

https://stackoverflow.com/a/41119253/217408

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

https://stackoverflow.com/a/39687157/217408

이

platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule) 
platformBrowserDynamic([{ provide: SharedService, useValue: sharedService }]).bootstrapModule(AppModule2) 

전자는 하나의 응용 프로그램 (공유 영역)을 생성 중 하나를 사용할 수 있습니다 소통하다. 나중에 동일한 페이지에 개별 Angular2 응용 프로그램을 만듭니다.