1

嗨，我对角度很陌生，根据我的要求，我准备了这样的路由模式

 {
            path: 'list',
            component: ListComponent,

            children: [
                {
                path: 'view/:id',
                component: ViewRoleComponent,

              },
              {
                path: 'edit/:id',
                component: EditRoleComponent,
                },
              {
                path: 'users/:id',
                component: RoleUsersComponent,

              }]
     }

列表.html

<div class="row">

<div class="col-md-4">
<ul>
<li *ngFor = "role of roles">
  <span><label>{{rle.name}}</label>

  <a [routerLink]="['edit', role.id]"   routerLinkActive='active' [routerLinkActiveOptions]="{exact:
                      true}" (click)="setRole(role)"><i>EDit</i></a>
  <a [routerLink]="['view', role.id]"   routerLinkActive='active' [routerLinkActiveOptions]="{exact:
                      true}" (click)="setRole(role)"><i>View</i></a>

</li>
</ul>

</div>
<div class="col-md-8">

<router-outlet></router-outlet>
// view, edit component will load here 
//By default view component loads here first after it's navigaing edit , view using abov links
</div>
</div>

list.component.ts

 export class ListComponent implement OnInit {

    constructor ( private router: Router, private roleService: RoleService,) {

    }

    ngOnInit() {
      this.getAllRoles();

    }

    getAllRoles () {
     this.roleService.getAllRoles().subscribe(res => this.sucess(res), err => this.error(err));
    }

     sucess(sucessResponce) {
     this.router.navigate(['cloud/role/list/view' + '' + '/' + sucessResponce[0].id]);
     this.roleService.setRole(sucessResponce[0]);
     }

     setRole (role) {
         this.roleService.setRole(role);
     }


     }

编辑.component.ts

 export class EditRoleComponent implements OnInit {


  constructor(private roleService: RoleService) {}
       ngOnInit () {
         this.roleService.getRole().subscribe(res => {
           console.log(res);// getting responce 
         })
       }


     }

RoleService.ts 导出类 RoleService {

      private roleDetails = new BehaviorSubject<any>(0);
      constructor(public http: Http) {}

      getAllRoles(): Observable<any> {
    return this.http.get('url')
      .map((response: Response) => response.json())
      // ...errors if any
      .catch(this.handleError);
  }


   setRole(role?: any) {
        this.roleDetails.next(role);
    }

    getRole() {
        return this.roleDetails.asObservable();
    }

     }

在上面的组件中，我在重定向到 o 索引角色的查看页面后，从 roleservice 获取所有角色，之后如果用户想要转到另一个视图或编辑页面，那么上面的列表 html 它将导航，它工作得很好

现在我的问题是

1）如果用户目前正在编辑页面 url，例如“cloud/role/list/edit/6”，在此如果用户刷新页面，它会重定向到 o index 角色视图页面，但我的要求是编辑（id-6）即使刷新页面后链接也应该是活动的，默认情况下首先只显示视图页面，

2）在列表组件中，我正在获取所有角色，数据包含roleId，roleName，status，system---每个角色的属性，我希望这个属性在我从路由器获得的源ID的编辑组件中，但对于其他我正在使用 rxjs 行为主题的事情，我在我的编辑页面中获得了所选角色的详细信息，

probelm 在刷新页面后给出 0，

如何解决上述两个问题，有没有其他方法可以满足我的要求，我在做什么错了，请指导我

提前致谢

4

0 回答 0