Question

我最近正在研究与查询相关的问题。在处理特定问题时 - 我需要定义一些查询参数。这是代码段 -

<a [routerLink]="resultsearch" [queryParams]="{query: result.label,
                                                       verify: false,
                                                       nav: 'filetype,protocol,hosts,authors,collections,namespace,topics,date',
                                                       start: 0,
                                                       indexof: 'off',
                                                       meanCount: '5',
                                                       resource: 'global',
                                                       prefermaskfilter: '',
                                                       rows: 10,
                                                       timezoneOffset: 0}"
          class="rellink">{{result.label}}</a>

这里的代码似乎在HTML文件中很乱。我想知道有没有办法在组件的.ts文件中定义它们然后传递[queryParams]指令中的值？如果有人可以指导我这将是很好的。提前致谢！：）

Answer 1

组件属性上的[...]语法称为property binding - 它将属性设置为您传入的template expression的值。

在那一刻，你只是直接传递一个简单的对象作为表达，但这不是你所能做的全部 - ＆＃39; context＆＃39;表达式使您可以访问组件类的所有成员变量。看起来您已经为routerLink媒体资源和result使用了此功能！因此，您可以轻松地将queryParams移动到组件类中并像这样绑定到它：

@Component({
  selector: 'my-component',
  template: `
    <a [routerLink]="resultsearch" [queryParams]="queryParams" class="rellink">
        {{result.label}}
    </a>
  `
})
export class MyComponent {
  resultsearch = "/whatever/your/path/is";    

  queryParams = {
    query: result.label,
    verify: false,
    nav: 'filetype,protocol,hosts,authors,collections,namespace,topics,date',
    start: 0,
    indexof: 'off',
    meanCount: '5',
    resource: 'global',
    prefermaskfilter: '',
    rows: 10,
    timezoneOffset: 0
  };

  result = {
      label: "hello, world"
  };
}

如何在Angular 2中以其他方式在[queryParams]指令中定义查询参数？

1 个答案: