标签: angular-router

我正在尝试实现一个带有登录页面的应用程序，然后当用户登录时，会有一个导航栏、工具栏和 sidenav 带有router-outlet.

基本上，在app.component.html我有一个定义：

<div *ngIf="isAuthenticated">
    <app-custom-navbar></app-custom-navbar>
    <app-custom-toolbar></app-custom-toolbar>
    <app-custom-sidenav></app-custom-sidenav>
</div>

<router-outlet></router-outlet>

我有这个路由：

const routes: Routes = [
    { path: '', canActivate: [AuthenticationGuard], component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: 'data', canActivate: [AuthenticationGuard], component: DataComponent },
    { path: 'projects', canActivate: [AuthenticationGuard], component: ProjectsComponent },
];

因此，这很有效，如果用户未通过身份验证，他将被重定向到/login.

问题是，当他通过身份验证时，sidenav 组件占据了整个空间，然后其他组件就看不到了。

基本上这是问题：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav>

    <!-- sidenav template... -->

  </mat-sidenav>
  <mat-sidenav-content>

   <!-- how can I put my content here and use routing at the …

我很惊讶没有确切的答案:

Root/forChild的方法是什么？

例如在RouterModule中:

Router.forRoot(routes)

在具有“useHash: true”路由器模块配置的 Angular 7 单页应用程序中，我需要生成要在新选项卡中打开的资源的 url。

对于应用程序窗口中的路由，以下代码按预期工作：

this.router.navigate(['foo', 1]);

这意味着，它生成的 url 如下： http://localhost:4200/#/foo/1

虽然使用以下方法时： const url = this.router.createUrlTree(['foo', 1]).toString();

url 是“/foo/1”——没有“#”，所以...

window.open(url, '_blank'); 结果与无效的网址：

http://localhost:4200/foo/1

我发现的唯一解决方案（黑客）非常残酷：

window.open('#' + url, '_blank');

RouterModule.forRoot(routes, {
  useHash: true,
  onSameUrlNavigation: 'reload',
}

showItem(item: Item) {
  // THIS WORKS AS EXPECTED
  this.router.navigate(['item', item.id]);
}

showItemInNewTab(item: Item) {
  const url  = this.router.createUrlTree(['item', item.id]).toString();

  // THIS WORKS BUT ITS A HACK :/
  window.open('#' + url, '_blank');
}

我在一个模块中有多个组件。我想根据路由路径显示组件。对于http://localhost:4200/account我想显示帐户组件。对于http://localhost:4200/setting我想显示设置组件 ..etc

app.routing.module.ts

{
    path: 'account',
    loadChildren: './modules/settings/settings.module#SettingsModule',
},
{
    path: 'settings',
    loadChildren:'./modules/settings/settings.module#SettingsModule', 
},

settings.routing.module.ts

export const routes: Routes = [
    {
        path: 'account',
        component: accountComponent
    },
    {
        path: 'account/edit',
        component: accountEditComponent
    },
    {
        path: 'settings',
        component: settingsComponent
    },
    {
        path: 'settings/edit',
        component: settingsEditComponent
    }
];

我在 settings.routing.module.ts 中做了哪些更改以显示这些组件。

我想根据 Angular 中的当前 url 更改某个标题。所以 component.ts 看起来像这样：

import {Router} from '@angular/router';
//code
public name: string
constructor(
    public router: Router
  ) {}
getName()
{
if(this.router.url === "/some_list")
{this.name = "List"}
else if(this.router.url === "/detail")
{this.name = "Detail"}
}

进而

<a>{{this.name}}</a>

现有的答案，例如如何检测 Angular 中的路线变化？无法告诉我在路由更改后如何做某事（更改 = true 或 false）。那么如何在 url 更改时运行此函数，以便标题根据当前视图？

我正在研究 Angular-6 项目。我的应用程序有很多子路由。其中之一如下：

  const routes: Routes = [
  {
    path: 'innovation-track/:innovation-track-id', component: InnovationTrackComponent,
    children: [
      {
        path: 'sprint', component: ScrumBoardComponent
      }
    ]
  }
];

我想从我的ScrumBoardComponent 中的URL获取创新轨道 ID值。

 constructor(private _route: ActivatedRoute) { }

 //somewhere in method     
   this._route.snapshot.parent.paramMap

this._route.snapshot.parent.paramMap

 this._route.params.<any parameter name>