Question

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

 {
            path: 'list',
            component: ListComponent,

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

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

              }]
     }

list.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);
     }


     }

edit.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）如果用户目前在编辑页面网址如“cloud / role / list / edit / 6”，则在此用户刷新页面时会重定向到o索引角色视图页面，但我的要求是编辑（id-6）链接应该是活动的，即使刷新页面后，默认情况下首先只显示视图页面，

2）在列表组件中我获取所有角色，数据包含roleId，roleName，status，system ---就像每个角色的属性一样，我想在我的编辑组件中使用这些属性我从路由器获取cource id，但是对于我正在使用rxjs行为主题的东西，我在编辑页面中获取所选角色的详细信息，

probelm是在刷新页面之后给出0，

如何解决以上两个问题，是否有其他方式为我的要求做路由，我跟着错了，请指导我

提前致谢

在angular4

0 个答案: