Question

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/plan/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");
      }
  }

Answer 1

您要在已路由的页面中进行路由吗？如果是这样

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

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

检查以下内容：Stackblitz只是一个示例供您使用。

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

评论以获取更多帮助：）

如何使用成角度的子路径渲染其他视图细节

1 个答案: