Angular Router不使用解析器加载组件

时间:2018-10-28 03:16:54

标签: angular typescript

我正在尝试将商品的ID作为参数传递给孩子的我的列表组件。显然,路由器可以找到正确的方法,我尝试创建错误的路径以得出此结论。在我的地址栏中,确切地显示了尽管该组件未呈现,但甚至没有到达ngOnInit()时应该经过的路径。

如我的代码所示。

我的路由器模块:

const clienteRoutes: Routes = [
  {
    path: '',
    component: ClienteComponent,
    children: [
      {
        path: '', redirectTo: 'listar'
      },
      {
        path: 'adicionar', component: ClienteFormComponent,
      },
      {
        path: 'listar', component: ClientesListComponent,
        children: [
          {
            path: 'ver/:id',
            component: ClienteFormComponent,
            resolve: {
              cliente: ClienteResolverService
            }
          }
        ]
      },
    ]
  }
];

我的解析器:

export class ClienteResolverService implements Resolve<Cliente> {

  constructor(private cliente: ClienteService, private router: Router) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Cliente> |
  Observable<never> {
    const id = route.paramMap.get('id');
    return this.cliente.buscarCliente(Number(id)).pipe(
      take(1), mergeMap(cliente => {
        if (cliente) {
          console.log(cliente.clienteId);
          return of(cliente);
        } else {
          this.router.navigate(['/adssadasdas/']);
          return EMPTY;
        }
      })
    );
  }
}

我的列表组件:

this.listaClientes = this.route.paramMap.pipe(
      switchMap(params => {
        this.selectId = +params.get('id');
        console.log(this.selectId);
        return this.clienteService.listarClientes();
      })
    );

我的详细信息组件:

export class ClienteFormComponent implements OnInit, OnDestroy {
  ngOnInit() {
    this.buildForm();
    this.initCheckboxSubscription();
    this.route.data.subscribe((data: { cliente: Cliente}) => {
      console.log(data.cliente.nome);
    });
  }
}

控制台: enter image description here

dsa

0 个答案:

没有答案