Angular 2 多布局路由 [英] Angular 2 Multiple layout routing

问题描述

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

我的网址如下:

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

http://localhost:4200/cgu <== 一个有共同导航的页面>

http://localhost:4200/abc <== 一个有共同导航的页面

有人可以向我解释这样做的最佳方法吗?

我试图重现这个解决方案:

如何在 Angular2 中切换布局

但它不起作用，或者我错误地将其调整为适合我的情况.

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

@Injectable()导出类导航服务{isHomePage:布尔值；}

在我的 home.component.ts 中

@Component({styleUrls: ['home.css'],templateUrl: './home.component.html',})导出类 HomeComponent {构造函数(私有导航服务:导航服务){navigationService.isHomePage = true;}}

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

导出类 AppComponent {构造函数(私有导航服务:导航服务){console.log("你好");控制台日志(导航服务.isHomePage)；如果(导航服务.isHomePage)console.log("家");}}

navigationService.isHomePage 是 undefined

我的错误是什么?

解决方案

我建议阅读 官方文档 因为它非常简洁并使用示例.

<块引用>

当用户执行应用程序任务时，Angular Router 支持从一个视图导航到另一个视图.

您可以将组件绑定到路由，以便当用户导航到它时显示正确的模板.

为了有一个共享的导航，你必须把它放在你的 router-outlet 之外，因此你的视图的内容将包含在该出口而不是导航中.

__

如果您不想在主页中显示它，您可以执行以下操作:

创建一个包含布尔值 isHomepage 的 NavigationService，离开主页后将其设置为 false，导航到主页后将其设置为 true.将其注入您的导航组件和模板中:

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

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

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屋！