在Angular元素内部包含img src是否可能？

Question

我正在使用Angular 8，并尝试使用Angular Elements包"@angular/elements"中的createCustomElement()命令创建可重用的Web组件。

所以这个组件本身非常简单。它只包含一些包装HTML代码和一个IMG标记，其中src指向一个徽标图像。以下是我的代码。

HTML

<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
  <img class="logo align-middle" [src]="headerImgPath">
  <span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>

TS

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'header-logo',
  templateUrl: './header-logo.component.html',
  styleUrls: ['./header-logo.component.scss'],
})
export class HeaderLogoComponent implements OnInit {
  @Input() logo: string;
  @Input() branding: string;
  @Input() url: string;

  public headerImgPath = 'elements-assets/images/my-logo.svg';
  public headerBranding = 'Platform Name';
  public homeURL: string;

  constructor() {}

  ngOnInit() {
    if (this.branding) {
      this.headerBranding = this.branding;
    }

    if (this.logo) {
      this.headerImgPath = this.logo;
    }

    if (this.url) {
      this.homeURL = this.url;
    }
  }
}

那么我将代码编译成一个 Web 组件，并将其放置在 AppModule 中，代码如下。

   const el = createCustomElement(LogoComponent, { injector: this.injector });
   customElements.define('page-logo', el);

最后将导出的JS库拉到一个新的自定义HTML页面中。

HTML

<div class="container" style="position: relative; height:200px; top: 100px;">
  <page-logo></page-logo>
</div>

但我看到的只是 HTML 的一部分。

在浏览器中呈现为：

<div class="container" style="position: relative; height:200px; top: 100px; >

    <my-logo _ngcontent-trw-c0="">
       <a class="logo-branding no-link flex-grow-2"></a>
    </page-logo>

</div>

标签从未被渲染。

- Showcaselfloyd

Answer 1

试试这个

<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
  <img class="logo align-middle" [src]="elements-assets/images/my-logo.svg">
  <span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>

或者这个

    <a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
      <img class="logo align-middle" [src]="this.logo">
      <span class="branding text-nowrap">{{ this.headerBranding }}</span>
    </a>

- GRF

---

为什么要使用“this.logo”而不是仅仅使用“logo”？ - Showcaselfloyd

你的资产似乎无法正确调用标志。this.logo 对你有用吗？ - GRF