Question

我尝试使用Angular实现按日期范围进行表单过滤。按下按钮后什么也没发生。似乎未选择路线。当我刚改变

[routerLink] =“ ['/ clients-rating / filtered'，startDate，endDate”

[routerLink] =“ ['/ clients-rating / filtered'，'2019-03-01'，2019-03-10”我看到了网址：http://localhost:9000/#/clients-rating/filtered/2019-03-01/2019-03-10。

为什么输入的值不从表单传送到组件？

我的代码：

clients-rating.component.html

<html>
    <body>
        <div>
           <input type="text" class="form-control" name="phone" id="start_date" 
                [(ngModel)]="startDate"/>
           <input type="text" class="form-control" name="phone" id="end_date" 
                [(ngModel)]="endDate"/>
           <button 
                [routerLink]="['/clients-rating/filtered',startDate,endDate" 
                class="btn btn-primary float-left 
                jh-create-entity create-clients-rating">
                <fa-icon [icon]="'eye'"></fa-icon>
           </button>
       </div>
     <body>
<html>

clients-rating.route.ts

{
    path: 'clients-rating/filtered/:startDate/:endDate',
    component: ClientsRatingComponent,
    data: {
        authorities: ['ROLE_USER'],
    },
    canActivate: [UserRouteAccessService]
},

...

clients-rating.component.ts

export class ClientsRatingComponent implements OnInit, OnDestroy {
    clientsRatings: IClientsRating[];
    startDate: String;
    endDate: String;

    constructor(
        protected clientsRatingService: ClientsRatingService,
        protected jhiAlertService: JhiAlertService,
        protected eventManager: JhiEventManager,
        protected accountService: AccountService,
        protected activatedRoute: ActivatedRoute
    ) {
    }

    loadAll() {
        this.clientsRatingService.query().subscribe(
            (res: HttpResponse<IClientsRating[]>) => {
                this.clientsRatings = res.body;
            },
            (res: HttpErrorResponse) => this.onError(res.message)
        );
    }

    ngOnInit() {
        this.startDate =  this.activatedRoute.snapshot.paramMap.get('startDate');
        this.endDate = this.activatedRoute.snapshot.paramMap.get('endDate');
        if (this.startDate == null || this.endDate == null) {
            this.loadAll();
        } else {
            this.clientsRatingService.filterByDate(this.startDate,  this.endDate);
        }
            this.accountService.identity().then(account => {
                this.currentAccount = account;
            });
        this.registerChangeInClientsRatings();
    }

client-rating.service.ts

@Injectable({ providedIn: 'root' })
export class ClientsRatingService {

 filterByDate(startDate: String, endDate: String,req?: any) {
        const options = createRequestOption(req);
        return this.http.get<IClientsRating[]>(`${this.resourceUrl}/filter /${startDate}/${endDate}`, {
            params: options,
            observe: 'response'
        });
    }

Answer 1

我认为您错过了]的RouterLink关闭。

但是我将Router.navigate与按钮的（单击）事件一起使用：

TS代码：

首先，导入路由器：

import { Router } from '@angular/router';

constructor(private router : Router) {} 

navigateTo(){
  this.router.navigate(['clients-rating/filtered/' + startDate + '/'+endDate+'']);
}

HTML代码：

<html>
    <body>
        <div>
           <input type="text" class="form-control" name="phone" id="start_date" 
                [(ngModel)]="startDate"/>
           <input type="text" class="form-control" name="phone" id="end_date" 
                [(ngModel)]="endDate"/>
           <button (click)="navigateTo()" class="btn btn-primary float-left jh-create-entity create-clients-rating">
                <fa-icon [icon]="'eye'"></fa-icon>
           </button>
       </div>
     <body>
<html>

角度过滤形式

1 个答案: