发表于: 2021-07-05 23:41:21

2 1784


今天完成的事情:了解到代码规范的,看师兄写的代码 ,说出我的感受:“整洁;美观;”。贴一点出来:

明天计划的事情:明天下午完成代码的修改(上午有事)


收获:

学到了组件之间进行传值:

HTML:

双向绑定:[(ngModel)]="record.con";实现输入框值得监听;

    <input type="text" id="text" [(ngModel)]="record.con" (input)="ff()" (compositionstart)="gg()"
      (compositionend)="hh()" maxlength="24" pattern="\d*">

 // TS文件: 声明绑定的输入框,监听输入的值

  public record: any = {

    con: ''
  }


进行传值:借用到路由,将input 输入的值送至 query-results 组件中(这是想获得此数据的组件)

      this.router.navigate(['/query-results'], {
        queryParams: {
          traceability: this.record.con
        }
      });


query-results 组件获取 上面组件input 监听的值,进行使用:也是需要用到路由。

  ngOnInit() {
    // 获得参数
    this.activatedRoute.queryParams.subscribe(queryParam => {
      this.traceability = queryParam.traceability.toUpperCase();
      this.initPage(this.traceability);
    });

  }


路由中的配置 :此为两兄弟组件进行传值,可以用到很多地方。

const routes: Routes = [
  { path: 'query-results'component: PagesComponent },
  { path: 'query'component: QueryComponent }, // 首页
  {
    path: '',
    redirectTo: 'query',  // 项目启动的第一个路由为showmain
    pathMatch: 'full'
  },
];




返回列表 返回列表
评论

    分享到