在角度模板中使用 routerLink

Question

  <a *ngIf="userBS$ | async"
    [routerLink]="{{ '/profile/'+(userBS$ | async)?.uid }}">
  </a>

用户是行为主题定义的这一行：

this.userBS$ = new BehaviorSubject<any>(this.currentUser);

这是错误信息：

compiler.js:466 未捕获错误：模板解析错误：解析器错误： 得到插值（{{}}），其中表达式应位于第 0 列 [{{ '/profile/'+(userBS$ | async)?.uid }}] 在 ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 (" ][routerLink]="{{ '/profile/'+(userBS$ | async)?.uid }}"> {{ (authServic"): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 解析器错误：意外的令牌 {、预期的标识符、关键字或 [{{ '/profile/'+(userBS$ | async)?.uid }}] 中第 2 列的字符串 ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 (" ][routerLink]="{{ '/profile/'+(userBS$ | async)?.uid }}"> {{ (authServic"): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 解析器错误：缺少预期：在 [{{ 中的第 58 列 '/profile/'+(userBS$ | async)?.uid }}] in ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 (" ][routerLink]="{{ '/profile/'+(userBS$ | async)?.uid }}"> {{ (authServic"): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 解析器错误：[{{ 中第 58 列的意外标记} '/profile/'+(userBS$ | async)?.uid }}] in ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 (" ][routerLink]="{{ '/profile/'+(userBS$ | async)?.uid }}"> {{ (authServic"): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 解析器错误：[{{ 中的第 59 列出现意外标记“}” '/profile/'+(userBS$ | async)?.uid }}] in ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 (" ][routerLink]="{{ '/profile/'+(userBS$ | async)?.uid }}"> {{ (authServic"): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 解析器错误：在预期表达式的位置得到插值 ({{}}) 在 [{{ '/profile/'+(userBS$ | async)?.uid }}] 的第 0 列 ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 ("
[错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误->] [错误 ->]{{ (userBS$ | async)?.displayName }} [错误 ->]{{ (userBS$ | async)?.displayName }} [错误 ->]{{ (userBS$ | async)?.displayName }} [错误 ->]{{ (userBS$ | async)?.displayName }} [错误 ->]{{ (userBS$ | async)?.displayName }} {{ (userBS$ | async)?.displayName }} ][src]="user_image" class="user-icon"> "): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@5:11 解析器错误：意外的令牌 {、预期的标识符、关键字或 [{{ '/profile/'+(userBS$ | async)?.uid }}] 中第 2 列的字符串 ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 ("同步)?.uid }}"> {{ (userBS$ | async)?.displayName }} ][src]="user_image" class="user-icon"> "): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@5:11 解析器错误：缺少预期：在 [{{ 中的第 58 列 '/profile/'+(userBS$ | async)?.uid }}] in ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 ("同步)?.uid }}"> {{ (userBS$ | async)?.displayName }} ][src]="user_image" class="user-icon"> "): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@5:11 解析器错误：[{{ 中第 58 列的意外标记} '/profile/'+(userBS$ | async)?.uid }}] in ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 ("同步)?.uid }}"> {{ (userBS$ | async)?.displayName }} ][src]="user_image" class="user-icon"> "): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@5:11 解析器错误：[{{ 中的第 59 列出现意外标记“}” '/profile/'+(userBS$ | async)?.uid }}] in ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@3:4 ("同步)?.uid }}"> {{ (userBS$ | async)?.displayName }} ][src]="user_image" class="user-icon"> "): ng:///AppHeaderNavbarModule/AppHeaderNavbarUserComponent.html@5:11 在 syntaxError (compiler.js:466) 在 TemplateParser.parse (compiler.js:24329) 在 JitCompiler._parseTemplate (compiler.js:33716) 在 JitCompiler._compileTemplate (compiler.js:33691) 在 eval (compiler.js:33593) 在 Set.forEach() 在 JitCompiler._compileComponents (compiler.js:33593) 在 eval (compiler.js:33463) 在 Object.then (compiler.js:455) 在 JitCompiler._compileModuleAndComponents (compiler.js:33462)

Answer 1

请注意，模板中的数据绑定不建议同时使用" " 和{{ }} 语法。 例如"{{ expression }}"。所以只需从模板数据绑定中删除{{ }}，如下所示，

[routerLink]=" '/profile/'+(userBS$ | async)?.uid">