重新加载搜索栏结果

Question

我创建了一个搜索栏来在我的应用程序中搜索用户。搜索栏位于我的导航栏中，当我输入内容并单击搜索按钮时一切正常，我被重定向到我的搜索页面并显示正确的结果。然而，在被重定向到我的搜索页面后，当我尝试在我的搜索栏中输入另一个输入并单击搜索按钮时，虽然 url 发生了变化，但输入正确并且页面自动刷新，结果没有更新。我必须再次手动刷新页面，然后才会显示新结果。这是为什么？这是导航栏组件中的代码：

 members: Member[];

 constructor(private memberService: MembersService)

 search(content: string) {
    this.memberService.search(content).subscribe((response: Member[]) => {
      this.members = response;
      console.log(response);
      console.log(content);
    })
  }


<form class="example ml-2"  style="margin:auto;max-width:300px">
        <input id="typeahead-format" name="content" [(ngModel)]="model.content" type="text" class="ml-2 
         form-control" placeholder="Search users"/>
        <button class="d-flex align-items-center justify-content-center" (click)="search(model.content)" 
         routerLink="search/{{model.content}}"><em class="fa fa-search"></em></button>
</form>

这是我的搜索栏组件中的代码：

export class SearchbarComponent implements OnInit {

  content: string;
  members: Member[];

  constructor(private memberService: MembersService, private route: ActivatedRoute,
    private appRef: ApplicationRef) {  }

  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      console.log(params);
      this.content = params['content'];
    });

    this.search();
  }

  search() {
    this.memberService.search(this.route.snapshot.paramMap.get('content')).subscribe((response: Member[]) => {
      this.members = response;
      console.log(response);
    })
  }
}

<div *ngFor="let member of members" style="margin-top:3%; margin-left:5%;">
    <p>Username: {{member.userName}}</p>
    <p>Name: {{member.firstName}}</p>
</div>

Answer 1

你应该尝试使用变化检测器参考（你可以在这里阅读：https://angular.io/api/core/ChangeDetectorRef）您必须添加到构造函数中：

constructor(private cd: ChangeDetectorRef) { }

在重新分配 var 后，您应该添加（在订阅者内部）：

cd.markForCheck();

它会“告诉”我们有变化请刷新 DOM

Answer 2

您的问题是由于使用了 this.route.snapshot。顾名思义，快照只计算一次，不会随时间改变。当您执行第二次搜索时，由于当前组件相同，因此 Angular 不会再次销毁和创建该组件。相反，它会重复使用原始的（因此它不会运行 ngOnInit 第二次）。

结果：

快照永远不会改变（这就是为什么您的第二次搜索不会更新 member 列表的原因）
搜索方法仅在您加载组件时运行（这就是为什么它在您刷新页面时有效）

为了使您的代码正常工作，您需要在每次路线更改时调用您的搜索方法（即在您的订阅中）。这看起来像这样：

ngOnInit(): void {
    this.route.params.subscribe((params) => {
      this.content = params['content'];
      this.memberService.search(this.content).subscribe((response: Member[]) => {
        this.members = response;
      });
    });
}

重新加载搜索栏结果

Reloading search bar results

routes

angular