标签: angular-activatedroute

我正在尝试为ActivatedRoute. 这是我的测试的样子。

it("should check if subscribes are called in init", () => {
    const subRouteSpy = spyOn(activatedRouteStub.paramMap, "subscribe");
    component.ngOnInit();
    expect(subRouteSpy).toHaveBeenCalled();
});

我的TestBed config：

const activatedRouteStub = {
  paramMap: {
    subscribe() {
      return of();
    }
  }
};

TestBed.configureTestingModule({
  declarations: [HomeFilterDrawerComponent],
  providers: [
    { provide: ActivatedRoute, useValue: activatedRouteStub }
  ],
  imports: [
    FormsModule,
    StoreModule.forRoot(appReducers),
    HttpClientTestingModule,
    RouterTestingModule
  ]
}).compileComponents();

测试一直失败让我Expected spy subscribe to have been called.不确定我在这里做错了什么。

ngOnInit组件内部的代码。

this.route.paramMap.subscribe(params => {
  if (params["params"].slug !== undefined) {
  } …

我正在尝试使用ActivatedRoute. 我已经尝试了以下示例，并且能够获得我正在寻找的数据，但只能获得一次。在子路由更改期间，我没有看到更新的“布局”值。

路线

const routes: Routes = [
  {
    path: '',
    component: Layout1Component,
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadChildren: './pages/analytics/analytics.module#AnalyticsModule',
        data: {
          layout: 'boxed'
        }
      },
      {
        path: 'files',
        loadChildren: './pages/files/files.module#FilesModule',
        data: {
          layout: 'full'
        }
      }
    ]
  }
];

布局1组件

export class Layout1Component implements OnInit {
  constructor(private service: AppService, route: ActivatedRoute) {
    this.layout = route.snapshot.firstChild.data['layout'];

    route.url.subscribe(() => {
      console.log(route.snapshot.firstChild.data['layout']);
    });
  }
}

我希望每次更改路线时都使用更新的“布局”值打印 console.log。

请帮我解决这个问题。

我使用快照方法获取价值，但在这种情况下它在“类”之后获取价值 20 但我需要 33 路径，如获取

credits/33/classes/20 only 20 or credits/33/classes/ only null("")

更新：我找到了我的问题的解决方案。

现在它正在正确获取 id。错误是访问了右子组件中的元素，在 Snapshot 版本中的子组件 MatDialog 组件中不起作用。

constructor(private route: ActivatedRoute) {} 
 ngOnInit(): void {
   console.log(parseInt(this.route.snapshot.paramMap.get('id1')));

如果您的 url 有 2 个 Id 值，则可以使用 route.parent 的快照

   console.log(parseInt(this.route.parent.snapshot.paramMap.get('id1')));
}

我有一个routes.ts像下面这样的文件：

import { AuthGuardService as AuthGuard } from '../services/auth-guard.service';

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},

];

和这样的auth-guard.service.ts文件：

export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isLoggedIn()) {
      this.router.navigate(['home']);
      return false;
    }
    return true;
  }
}

它适用于已知路线，例如users但是当我尝试未知路线时，homeee它无法正常工作并显示带有页眉和页脚且其中没有内容的页面。如何将所有未知路由重定向到 home 组件？

我也想知道这是否是我喜欢做的事情的好方法？（我喜欢只有登录用户才能看到除 …

我收到错误，因为在单元测试时无法读取 angular 7 中激活路由的未定义属性“订阅”。我已经尝试了多种方式，请帮忙。

Observer.of 对我不起作用，因为我有 rx.js 版本 6.3.3

这是我的组件文件 ChildComponent.ts

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-child',
    template: `
        <h1>Enter your name</h1>
        <form
              [formGroup]="nameForm"
              (ngSubmit)="submitForm(nameForm)"
        >
            <input
                   type="text"
                   formControlName="firstName"
                   placeholder="first"
            >
            <input
                   type="text"
                   formControlName="lastName"
                   placeholder="last"
            >
            <button type="submit">launch to space</button>
        </form>
    `,
    styleUrls: ['./child.component.css']
})
export class ChildComponent {
    @Input() nameForm: FormGroup;
    private abc: number;
    constructor(
        public route: ActivatedRoute,
       ) {

        this.route.queryParams.subscribe(params => …