Javascript 基于使用相同组件的查询字符串的角度载荷数据

我想知道是否可以基于查询字符串加载数据，例如，如果用户使用以下链接 这将使用相同的组件（即CustomerComponent）加载数据，如果用户点击查询参数，它将从相同的组件加载数据

我的组件看起来像这样

@Component({
  selector: 'app-customers',
  templateUrl: './customers.component.html',
  styleUrls: ['./customers.component.css']
})
export class CustomersComponent implements OnInit {


  public customers: Customer[] = [];
  public archivedCustomers: Customer[] = [];

  public type;
  public archived:boolean = false;


  constructor(private customerService: CustomerService,
              private dialog: MdDialog,
              private addressBookService:AddressBookService,
              private activeRoute: ActivatedRoute,
              private route:Router) {

    this.type = this.activeRoute.snapshot.queryParams["type"];

  }



  openDialog() {
    this.dialog.open(NewCustomerComponent);
  }
  ngOnInit() {
    this.getCustomersList();
    if(this.type != null || this.type == "archived"){
      this.archived = true;

    }
  }

  getCustomersList(){
    this.customerService.getCustomerList()
      .subscribe(
        (res) => {
          this.customers = res;
          if(this.archived){
            this.customers.forEach((c)=>{
              if(!c.active){
                this.archivedCustomers.push(c);
              }
            });
          }
        },
        error => {
          console.log(<any>error);
        }
      );
  }

}

这是我的路线

  <li><a routerLink="/earning/customers" class="ripple-surface" (click)="color='#00c853'">All Customers <em>32</em></a></li>
   <li><a [routerLink]="['/earning/customers']" [queryParams]="{type: 'archived'}" class="ripple-surface" (click)="color='#00c853'">Archived <em>3</em></a></li>

所有客户32
存档3

---

提前谢谢

是的，这是可能的。而不是像这里那样从快照访问参数：

 this.type = this.activeRoute.snapshot.queryParams["type"];

您需要使用queryParams observable，如下所示：

this.activeRoute.queryParams.subscribe(params => {
    this.type = params['type']
}

---

您可以在此处找到定义/读取参数的完整演练：

谢谢，这就是我要找的。顺便说一下，我看过你的一些视频，你做得很好。非常感谢！

 this.type = this.activeRoute.snapshot.queryParams["type"];

this.activeRoute.queryParams.subscribe(params => {
    this.type = params['type']
}