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

Question

我想知道是否有可能基于查询字符串加载数据，例如，如果用户其以下链接http：// localhost：4200 / earning / customers？type = archived将使用相同的组件加载数据，即CustomersComponent，如果用户使用查询参数访问http：// localhost：4200 / earning / customers ，它将从同一组件加载数据。

我的组件看起来像这样

@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);
        }
      );
  }

}

这是我的模板中的内容

<header>
  <h4><a routerLink="/earning">Earning</a></h4>
  <h1><strong><i class="earning"></i> Customers</strong></h1>
</header>
<article>
  <ul>

  </ul>
  <table class="customers" *ngIf="customers || archived">
    <thead>
    <tr>
      <th class="heading">Company</th>
      <th class="heading">Contact</th>
      <th nowrap>They Owe You</th>
      <th width="1%"> </th>
    </tr>
    </thead>
    <tbody *ngIf="!archived">
      <tr *ngFor="let customer of customers">
        <td class="heading">
          <a [routerLink]="['/earning/customers/sales',customer.id]">{{customer.customer_name}}</a>
        </td>
        <td class="sub-heading" nowrap><a class="tooltipped" data-position="top" data-delay="50" data-tooltip="@customer.getCompanyName is a customer">First name Last Name</a></td>
        <td nowrap>total balance due</td>
        <td nowrap class="extras">
          <button md-icon-button [mdMenuTriggerFor]="menu">
            <md-icon>more_vert</md-icon>
          </button>
          <md-menu #menu="mdMenu">
            <button md-menu-item [routerLink]="['/earning/customers/invoice/new',customer.id]">
              <span>Create Invoice</span>
            </button>
            <button md-menu-item>
              <span>Add Payment</span>
            </button>
            <md-divider></md-divider>
            <button md-menu-item [routerLink]="['/earning/customers/sales', customer.id]">
              <span>View Sales</span>
            </button>
            <button md-menu-item [routerLink]="['/earning/customers/profile',customer.id]">
              <span>View Profile</span>
            </button>
            <button md-menu-item>
              <span>Email Statement</span>
            </button>
          </md-menu>
        </td>
      </tr>
    </tbody>

  </table>

  <div class="plus-button"><a href="javascript:void(0)" (click)="openDialog();"><i class="material-icons">add_circle</i> Customer</a></div>
</article>

这就是我的路线

{
    path: 'earning',
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children:[
          { path: 'earning', pathMatch: 'full',  component: CustomersComponent },

          { path: 'customers', component: CustomersComponent},

        ]
      }
    ]
  },

这是我的路线链接

  <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>

提前致谢

Answer 1

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

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

您需要使用可观察的queryParams，如下所示：

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

您可以在此处找到定义/读取参数的完整过程： https : //app.pluralsight.com/player?course=angular-routing&author=deborah-kurata&name=angular-routing-m4&clip=0&mode=live