2016-10-30 3 views
0

나는 angular2를 처음 사용합니다. 나는 다른 페이지에 다른 머리글과 바닥 글을 가지고 있지만 그냥 경로의 구성 요소를 교체각도 2 라우팅

<router-outlet></router-outlet> 

같은 라우터 콘센트를 사용하여이 작업을 수행하는 방법을 모르는하는 작업을 수행합니다. 그래서 이것을 얻는 가장 좋은 방법은 무엇입니까? 필자는 많은 부분을 검색했지만 모든 단일 구성 요소에서 머리말/꼬리말을 호출하는 애처로운 솔루션을 발견했습니다.

감사

답변

1

는 대답은 사용자의 요구 사항에 따라 달라집니다 머리글/바닥 글은 정적이지만 구성 요소 라우터와 중첩 라우팅을 사용할 수있는 응용 프로그램의 일부에 대한 다른 경우. 상위 경로는 머리글/바닥 글 레이아웃을 결정하고 자식 경로는 실제 내용을 결정합니다.

더 많은 로직이 관련되어 있으면, f.e. 서비스를 사용하여 내용을 결정하는 머리글과 바닥 글에 대한 특수 구성 요소를 만들 수있는보다 동적 인 방법으로 내용을 결정해야합니다. (예를 들어, 사용자가 로그인 한 경우와 익명 액세스하는 경우)

+0

것은 어떤 부분에서 내가 로그인에 대한 머리글/바닥 글을 그냥 페이지를 갖고 싶어하지 않는다는 것입니다 귀하의 요구 사항에 따라 로그인 부하 호출합니다. 사용자가 로그인 한 후에는 머리글/바닥 글을 추가 할 수 있습니다. –

+0

해당 시나리오에서 * ngIf를 사용하여 조건부 렌더링을 사용하는 것이 좋습니다. 필요한 상태를 제공하고 머리글과 바닥 글에 * ngIf를 사용하는 AuthService를 사용할 수 있습니다. – Thomas

+0

을 구체적으로 말하자면 모듈에 3 페이지 (로그인, 가입, 잊어 버린 패스) 권한을 부여하는 인증을 받았습니다. 나는 그 모듈에서 라우팅을 정의했다. 그래서 지금 사용자가 다른 3 개의 페이지 (login/signup/forgot-pass)가 아닌 다른 abc.com/xyz를 방문하게하면 xyz 구성 요소가있는 해당 모듈로 라우팅을 옮기고 인증을 남겨두고 싶습니다. 기준 치수. –

1

작업을 수행하는 것은 정말 간단합니다. 최상위 라우터 출력을 사용하는 HTML 파일에는 아무 것도 추가하지 마십시오. 이제 부모 라우터 콘센트에로드 할 모든 페이지가 전체 페이지를 포함하므로 요구 사항에 따라 모든보기를 디자인 할 수 있습니다.

누군가 응용 프로그램에서 공통적 인 것이 필요한 경우 가장 일반적인 라우터 콘센트가있는 동일한 파일에 공통 요소를 넣으십시오.

0

그런 경우 상위 뷰에 머리글과 바닥 글을 보관하지 마십시오. 보기를 만들고 그것을 집으로 부르십시오. 이보기와 꼬리말과 머리글을 하나의 유무선 콘센트에두고 모든 구성 요소를이 포트에만로드하십시오. 다른보기를하고는 최고 수준의 부모보기

--APP(main) 
    |--MAIN (parent container) 
     |--HOME (will contain all view) 
       |--CHILD (parent will be home) 
     |--LOGIN (Parent Will be main)