我想知道是否可以根据查询字符串加载数据,例如,如果用户的以下链接 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>
提前致谢
答案 0 :(得分:1)
是的,有可能。而不是像在这里一样从快照中访问参数:
this.type = this.activeRoute.snapshot.queryParams["type"];
您需要使用queryParams observable,如下所示:
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