Question

我还在学习角度和打字稿，请原谅我这个愚蠢的问题...

我有一个包含演员的列表，一旦点击演员，它会将你重定向到一个详细页面。列表的网址如下所示

localhost:4200/actors

所以一旦点击演员，就像这样

localhost:4200/actors/Jonas

但是我试图检查所选择的演员是否确实存在。因此，如果用户在URL中手动键入随机名称，则会重定向回/ actors页面，而不是显示空白页面。

我的组件如下所示：

actor: Actor;
constructor(
    private actorService: ActorService,
    private route: ActivatedRoute,
    private location: Location
) {}
ngOnInit(): void {
    this.route.params.subscribe(() => {
        if (/* code to check if actor.name exists in the url */ ) {
            this.route.paramMap.switchMap((params: ParamMap) =>
                this.actorService.getActor(params.get('name')!))
                .subscribe(actor => this.actor = actor);
        }else {
            this.location.go('/actors');
        }
    });
}

任何人都知道我是如何实现这一目标的？

Answer 1

试试这个

 this.route.params.subscribe( param => {
            //check if there is a value in name parameter
        if (param['name') {
            // call the data
              this.actorService.getActor(param['name'])
              .then( actor =>{
                    //if the data doesn't exist go to /actors
                   if(!actor)
                     this.location.go('/actors');
               })
        }else {
            this.location.go('/actors');
        }
    });

Answer 2

您不应嵌套订阅呼叫。如果要执行嵌套的异步操作，可以使用mergeMap或switchMap来实现此目的。

但是，您可以通过以下方式从路径路径获取name参数：

$("#edit-date-debut").attr('type','text');
$("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });

Answer 3

Angular提供了一种在路由到名为Resolver的特定路径之前解析数据的方法，该路径是从Resolve实现@angular/router接口的服务。

对于您的示例，您可以构建一个这样的解析器：

@Injectable()
export class ActorResolver implements Resolve<Actor> {
  constructor(private actorService: ActorService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Actor> {
    let name = route.paramMap.get('name');
    return this.actorService.getActor(name).take(1).map(actor => {
      if(actor) { // check if actor exists else redirect
        return actor;
      } else {
        this.router.navigate(['/actors']);
        return null;
      }
    });
  }
}

要提供解析程序，您必须将其添加到模块的providers列表中。并告诉路线使用这样的解析器：

{ 
  path: ':name',
  component: ActorDetailsComponent,
  resolve: {
    actor: ActorResolver
  }}
}

您甚至可以在组件中获取已解决的actor - 数据：

constructor(private route: ActivatedRouteSnapshot) {
  this.actor = this.route.data.actor;
}

您可以在docs中找到有关路线解析器的更多信息。

Answer 4

//这是代码

this.route.params.subscribe( params => {
        if (params['name']) {
           //do your code
        }else {
            this.location.go('/actors');
        }
    });

Answer 5

actor: Actor;
constructor(
    private actorService: ActorService,
    private route: ActivatedRoute,
    private location: Location
) {}
ngOnInit(): void {
    this.route.params.subscribe((params) => {
        if (params['name']) {
            this.actorService.getActor(params.get('name')!))
                .subscribe(actor => this.actor = actor);
        }else {
            this.location.go('/actors');
        }
    });
}

Angular2检查URL中是否存在名称

5 个答案: