Question

我对角度知识还很陌生，想知道如何制作它，所以我可以在第一页上放置要过滤的信息到表格中，当您按“搜索”时，它将转到第二页过滤后的表格页面。

我的问题很奇怪，但是我真的找不到任何在线答案。

我不能共享代码作为对其工作的机密。

类似于本网站的内容：https://maerskcontainersales.com/

我曾尝试使用模拟数据，但仍然无法正确地做我的事情。

Answer 1

有多种方法可以实现这一目标。

使用提供商

假设您有两个页面，而，则在serach-page中输入过滤器，在result-page中是表呈现的地方。

在搜索页面中，您将创建输入（例如：文本框，下拉列表等），并为所有输入提供ngModel，或者您可以使用Angular反应形式，即FormGroup和FormControls。用户将选择他们的输入，然后单击搜索按钮，这将从模型或控件中读取值并将其存储在提供程序中。

search-page.component.html

<form [formGroup]="searchForm" (submit)="search()">
    <input formControlName="country" />
    <input formControlName="city" />
    ...
    <input type="submit">
</form>

search-page.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.searchService.setData({ country, city });
        this.router.navigate(['/result']); // '/result' is path on the result-page
    }
    ...
}

search.service.ts

@Injectable()
export class SearchService {
    _data : any;
    set data(val) {
        this._data = val;
    }
    get data() {
        return this._data;
    }
}

result-page.component.ts

export class ResultPage {
    ...
    ngOnInit() {
        const filters = this.searchService.getData();
        // filters will be your data from previous page
    }
    ...
}

使用RouterParams

search-page.component.html

// same as before

search-page.component.ts

export class SearchPage {
    ...
    search() {
        const country = this.searchForm.get('country').value
        ... 
        // get rest of the values
        ...
        this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
    }
    ...
}

result-page.component.ts

export class ResultPage {
    ...
    constructor(route:ActivatedRoute) {
        this.country = route.snapshot.paramMap.get("country")

        // alternatively you can also do below
        route.paramMap.subscribe(filters => {
            // you will have your filters here
        });
    }
    ...
}

一旦结果页中有了过滤器的值，就可以使用它们来获取数据或过滤器数据（如果已提取），然后相应地呈现表。

让我知道我是否不清楚。

Answer 2

简单的解决方案，我建议您将过滤器组件和结果组件用作第三个容器组件。当您按下“过滤器”按钮时，该组件将获得过滤条件作为输入变量，并输出过滤条件（使用输出变量）。

容器应用将如下所示：

<filterComponent (onFilter)="changeFilter($event)" [data]="someDate" *ngIf="!filterCriteria"></filterComponent>

<resultsComponent [data]="someDate" [filterCriteria]="filterCriteria" *ngIf="!!filterCriteria"></resultsComponent>

发送到第二个tableComponent的filterCriteria将来自第一个tableComponent的eventEmmiter。 filterCriteria变量将被初始化为null，这将允许您从一个表切换到另一个表。

使用2页以角度过滤表格

2 个答案: