时间戳

首页 > 解决方案 > 如何在角度中使用子路由来渲染其他视图细节

angular - 如何在角度中使用子路由来渲染其他视图细节

问题描述

This is my code in routing module
const routes: Routes = [
	{ path:'', component:LoginComponent},
	{ path:'home', component:HomeComponent, canActivate: [AuthGuardService],
		children: [
			{ path: 'mecanico', component:AdminComponent,
				children: [
					{ path:'create_item', component:NuevoItemComponent},
					{ path:'consulta_item', component:ConsultaItemComponent},
					{ path:'plan', component:PlanMantenimientoComponent, 
						children:
							[{ path:'formato_general/:id', component:FormatoGeneralComponent}]},					
					{ path:'operando', component:EquipoOperandoComponent},
					{ path:'detenido', component:EquipoDetenidoComponent},
					{ path:'resumen', component:ResumenComponent},
					{ path:'ver_planes', component:VerPlanesComponent, 
						children:
							[{ path:'edit_planes/:id', component:EditPlanesComponent}]},					
				]
			}
		]
	}
In my view this is my code
<table class="table table-responsive table-hover" *ngIf="sizze !=0">
            <thead>
              <th style="text-align:center;font-size: 15px;" width="20%">LINEA</th>
              <th style="text-align:center;font-size: 15px;" width="40%">EQUIPO</th>
              <th style="text-align:center;font-size: 15px;" width="20%">FECHA SOLICITUD</th>
              <th style="text-align:center;font-size: 15px;" width="10%">ESTATUS PLAN</th>
              <th style="text-align:center;font-size: 15px;" width="10%">ACCIONES</th>
            </thead>
            <tbody>
              <tr *ngFor="let planes of plan | paginate: { itemsPerPage: 8, currentPage: p }">
                <td style="text-align:center;font-size: 15px;" width="20%">{{planes.LINEA}}</td>
                <td style="text-align:center;font-size: 15px;" width="40%">{{planes.EQUIPO}}</td>
                <td style="text-align:center;font-size: 15px;" width="20%">{{planes.FECHA | date:'fullDate'}}</td>
                <td style="text-align:center;font-size: 15px;" width="10%" *ngIf="planes.ESTATUS === 1"> 
                  <button type="button" class="btn btn-sm btn-outline-success" (click)="changeStatus($event,data.id)" #data id="StatusId{{planes.id_planes}}" value="APROBADO">&nbsp;&nbsp;&nbsp;APROBADO&nbsp;&nbsp;&nbsp;</button>
                </td>
                <td style="text-align:center;font-size: 15px;" width="10%" *ngIf="planes.ESTATUS === 3"> 
                  <button type="button" class="btn btn-sm btn-outline-danger"  (click)="changeStatus($event,data.id)" #data id="StatusId{{planes.id_planes}}" value="NO APROBADO">NO APROBADO</button>
                </td>
                <td style="text-align:center;font-size: 15px;" width="10%">
                  <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-sm btn-info btn-block" [routerLink]="['edit_planes',planes.id_planes]"><i class="far fa-eye"></i></button>
                  </div>
                </td>
              </tr>
            </tbody>

实际上，我尝试在我的角度项目中使用子路由渲染其他视图，因为我有三种类型的用户，我的问题是当用户单击按钮时显示其他视图的内容，按钮包含我的数组中的 id 当用户单击按钮不呈现其他视图并站在同一视图中，但 URL 更改我的链接： http://localhost:4200/home/mecanico/plan 单击按钮： http://localhost:4200/home/mecanico/计划/formato_general/4

  my function in subcomponent 

  UpdatePlanData(){   //  Funcion que sirve para obtener los datos del plan de mantenimiento separando el equipo operando y detenido, seleccionado con un id desde la vista
    const plan = this.actRoute.snapshot.params;   //  Se obtiene el id de la url del plan que se haya seleccionado
    if(plan.id){      //  Si esta el argumento id entra
      this.itemServ.updatePlanData(plan.id).subscribe(
        res =>
          {
            this.operando = res[0].operando;
            this.detenido = res[1].detenido;
            this.plan     = res[2].plan;
            this.equipo = this.plan[0].EQUIPO;
            this.fecha =  this.plan[0].FECHA;
            this.lengOp = this.operando.length;   //  Se obtiene la longitud para los controles de paginacion
            this.lengDe = this.detenido.length;   //  Se obtiene la longitud para los controles de paginacion
          },
        err =>
          {
            console.log(err,"error update plan data");
          }
      )}else{
        console.log("El argumento en la URL no es un id valido en edit_planes component");
      }
  }

标签： angular

解决方案

你想在路由页面中路由吗？如果是这样的话

在新模块中创建每个组件，然后在该模块中定义内部路由，因此每当您路由到模块时，您都可以在内部路由中进行路由。

保持当前路由不变，并声明新模块（在 app.module 中导入这些模块），并在该模块中创建要在该模块中路由的新组件。

看看这个：Stackblitz只是一个供您使用的示例。

这里 app.module 中有一个组件和一个名为 intmodule 的模块，而 intmodule 中有两个组件。从 app.module 我们可以在 hello.component 和 intmodule 之间进行路由，在 intmodule 中我们可以在 comp1 和 comp2 之间进行路由。

评论以获得更多帮助:)

推荐阅读