如何通过 Angular 代码导航到具有输入的组件

Question

我有一个组件通过从另一个组件激活来接收输入我需要通过代码从一个组件导航到另一个组件并在导航中发送输入值。你是怎么做到的？

我知道如何从一个组件导航到另一个组件，但我不知道如何将输入值发送给它。感谢您的协助！谢谢

这是我的第一个组成部分：

 export class HostPersonalAreaComponent implements OnInit {

  constructor() { }
  panelOpenState = false;
  @Input() suggestion: Suggestion;

  ngOnInit() {
  console.log(this.suggestion);
   }
}

这是导航到上面编写的组件的代码：

    this.router.navigate(['/host-personal-area']);

问题是我没有发送输入值。有谁知道怎么寄吗？

Answer 1

您可以在您的路线中添加所谓的可选参数。在您的第一个组件中，您需要添加：

this.router.navigate(['/host-personal-area', {data: yourData}]);

这将导致更长的 Url，例如 http://localhost:4200/host-personal-area;data=yourData。

读取数据需要添加：

this.route.snapshot.paramMap.get('data');

到你的第二个组件，这样你就可以检索你之前添加到你的路由的参数值。您还可以查看了解更多信息。

Answer 2

当父组件与其子组件通信时，输入很方便。在您的情况下，您想依赖其他模式。

服务

保存您要从一个视图到另一个视图使用的变量的有状态服务可能是您想要尝试的最可靠的模式。

生成服务（使用 cli），并使用其 public 访问器向其添加私有 behaviorSubject：

@Injectable({
  providedIn: 'root',
})
export class MySingletonService {
  private suggestion: BehaviorSubject<Suggestion> = new BehaviorSubject(null);

  onSuggestionChange(): Observable<Suggestion> {
    return this.suggestion.asObservable();
  }
  
  setSuggestion(nextSuggestion: Suggestion): void {
    this.suggestion.next(nextSuggestion);
  }
  
  resetSuggestion(): void {
    this.suggestion.next(null);
  }
}

然后您可以在第一个组件中设置建议，触发导航，然后在第二个组件中访问它。

export class MyFirstComponent {
  constructor(
    private myService: MyService,
    private router: Router
  ) {}
  
  setSuggestion(suggestion: Suggestion): void {
    this.myService.setSuggestion(suggestion);
    this.router.navigate(['to', 'second', 'component']);
  }
}

export class MySecondComponent {
  suggestion: Suggestion;
 
  constructor(private myService: MyService) {}
  
  ngOnInit(): void {
    this.myService.onSuggestionChange().subscribe(suggestion => this.suggestion = suggestion);
  }

}

查询参数

第二种传递数据的方法是使用url。您可以使用 queryParams 参数向路由添加参数：

this.router.navigate(['url'], { queryParams: { suggestion }});

然后从第二个组件通过ActivatedRoute进入：

this.route.queryParams.subscribe((params) => { this.suggestion = params.get('suggestion');}

如何通过 Angular 代码导航到具有输入的组件

How to navigate to a component with input by Angular code

navigation

angular