Angular 2多重布局布线 [英] Angular 2 Multiple layout routing

问题描述

在我的angular 2应用程序上，我的主页和应用程序其余部分之间的布局完全不同. 该应用程序的其余部分只有一个共同的导航.

我的网址看起来像:

http://localhost:4200/< ==这是我的主页

http://localhost:4200/cgu < ==与nav相同的页面

http://localhost:4200/abc < ==与nav相同的页面

有人可以向我解释最好的方法吗?

我试图重现此解决方案:

如何在Angular2中切换布局

但是它不起作用，或者我在使它适应我的情况时犯了错误.

最后我尝试了您的解决方案 所以我创建了navigation.service.ts

@Injectable()
export class NavigationService {
  isHomePage: boolean;
}

在我的home.component.ts

中

@Component({
  styleUrls: ['home.css'],
  templateUrl: './home.component.html',
})
export class HomeComponent {

  constructor(private navigationService: NavigationService) {
    navigationService.isHomePage = true;
  }
}

在我的app.component.ts中，我尝试获取isHomePage值:

export class AppComponent {

  constructor(private navigationService : NavigationService) {

    console.log("HELLO");
    console.log(navigationService.isHomePage);
    if(navigationService.isHomePage)
      console.log("HOME");
}}

navigationService.isHomePage为undefined

我怎么了?

解决方案

我建议阅读

这样，它只会显示在首页之外.

On my angular 2 app, I have a completely different layout between my home page and the rest of the app. The rest of the app have only a nav in common.

My url looks like :

http://localhost:4200/ <== this is my home page

http://localhost:4200/cgu <== a page with nav in common

http://localhost:4200/abc <== a page with nav in common

Can someone explain to me the best way to do this ?

I tried to reproduce this solution :

How to switch layouts in Angular2

But it doesn't work, or I made mistake to adapt it to my case.

EDIT:

Finally I tried your solution So I created the navigation.service.ts

@Injectable()
export class NavigationService {
  isHomePage: boolean;
}

In my home.component.ts

@Component({
  styleUrls: ['home.css'],
  templateUrl: './home.component.html',
})
export class HomeComponent {

  constructor(private navigationService: NavigationService) {
    navigationService.isHomePage = true;
  }
}

In my app.component.ts I try to get the isHomePage value:

export class AppComponent {

  constructor(private navigationService : NavigationService) {

    console.log("HELLO");
    console.log(navigationService.isHomePage);
    if(navigationService.isHomePage)
      console.log("HOME");
}}

navigationService.isHomePage is undefined

What's my mistake ?

解决方案

I would recommend reading the official documentation as it is very concise and uses examples.

The Angular Router enables navigation from one view to the next as users perform application tasks.

You would bind a component to a route so that when a user navigates to it it shows the right template.

In order to have a shared navigation, you must place it outside of your router-outlet, therefore the content of your views will be contained in said outlet but not the navigation.

__

If you do not want to display it in your homepage you may do the following:

Create a NavigationService that contains a boolean isHomepage, set it to false once you leave the home page, and true once you navigate to it. Inject it in your navigation component, and in your template:

<nav *ngIf="!_navigationService.isHomePage"></nav>

This way it will only be displayed out of the home page.

这篇关于Angular 2多重布局布线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！