Question

我有一个角度课：

@Component({
  selector: 'main-title',
  styleUrls: ['main_title.scss'],
  template: `
      <ng-template>
          <div class="main-title">
              <h2 [ngClass]="{'-small': isSmall }"
                  class="{{titleClassName}}" data-cy="main-title">{{title}}</h2>
          </div>
      </ng-template>
  `,
})
export class MainTitle extends NoRootTagComponent {

  /**
   * Accepts strings or array (will map to multiple lines)
   */
  @Input('title')
  title: string

  @Input('titleClassName')
  titleClassName = ''

  @Input()
  isSmall?: boolean

  constructor(vcRef: ViewContainerRef, public router: AsyncRouter) {
    super(vcRef)
  }
}

并像这样使用它：

<main-title
  [isSmall]="true"
  titleClassName="h5"
  title="please verify your zip code."></main-title>

但是，我看不到布尔值isSmall被传递了。由于某些原因，它仍为undefined。是因为NoRootTagComponent吗？我不知道为什么会这样。

Answer 1

无论您插入ng-template到哪里，都将在isSmall被选中的地方，因此这就是为什么给它undefined的原因，您无需将isSmall传递给子组件，而是定义插入ng-template的组件中！

Answer 2

在这里疯狂猜测；问题出在样式的SCSS定义之内。

您是否正在尝试做这样的事情？

.main-title {
    color: blue;

    &-small {
        font-size: 8px;
    }
}

因为您的组件将呈现为<h2 class="some-class -small">（注意空格），并且将不应用上述样式规则。

相反，我建议您为组件的模板提供类似的信息：

  <div class="main-title">
    <h2 class="{{ isSmall? titleClassName+'-small' : titleClassName }}" data-cy="main-title">
      {{title}}
    </h2>
  </div>

此外，请注意，我删除了<ng-template>标签。您不需要此组件。希望这对您有所帮助。

为什么输入对我的角度分量不起作用？

2 个答案: