Question

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

我的网址如下：

http://localhost:4200/＆lt; ==这是我的主页

http://localhost:4200/cgu＆lt; ==导航共享的页面

http://localhost:4200/abc＆lt; ==导航共享的页面

有人可以向我解释最佳方法吗？

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

How to switch layouts in 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

我的错误是什么？

Answer 1

我建议阅读official documentation，因为它非常简洁并使用了示例。

当用户执行应用程序任务时，Angular Router可以从一个视图导航到下一个视图。

您可以将组件绑定到路径，以便在用户导航到该路径时显示正确的模板。

要获得共享导航，您必须将其放在router-outlet之外，因此您的观看内容将包含在所述插座中，但不包含在导航中。

__

如果您不想在主页上显示，可以执行以下操作：

创建一个包含布尔值NavigationService的{{1}}，在离开主页后将其设置为false，并在导航到主页后将其设置为true。将其注入导航组件和模板中：

isHomepage

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

Angular 2多布局路由

1 个答案: