Angular页面跳转

Angular页面跳转的实现

传一个或多个参数

页面跳转请求

<td nzAlign="center">
     <a nzAlign="center" [routerLink]="['/statisticaldetails']"
         [queryParams]='{id:data.id, examName:data.examName, scheduleId:data.scheduleId}'>查看详情</a>
</td>

[routerLink] 为需要跳转的页面路径，取自 ts 的名称 selector: 'app-statisticaldetails',
[queryParams] 为通过路径传递到跳转页面的参数

页面跳转接受参数

this.activate.queryParams.subscribe((data) => {
    if (data.examName) {
        this.examName = data.examName;
        this.examId = data.id;
        this.scheduleId = data.scheduleId;
    }
})

传数组参数

页面跳转传递数组

data:传递的参数数组

/question-addmodule：将要跳转的页面

跳转请求

 const param = Base64.encodeURI(JSON.stringify(data));
 this.router.navigate([`/question-addmodule`, param]);

页面接受方法

 this.activatedRoute.params.subscribe(
            (params: Params) => {
                this.project = JSON.parse(Base64.decode(params['project']));
                if (this.project) {
                    console.log(this.project,'跳转数据')
                }
            }
        );

返回按钮

返回按钮的实现

通过button绑定即可

goback() {
    history.back();
}