Question

这是我的代码：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['../assets/css/app.component.css']
})
export class MainVisualComponent {
  main_visual_img:string = "";
  main_visual_desc:string = "";
  main_visual_title:string = "";
  constructor(main_visual_img:string, main_visual_desc:string, main_visual_title:string){
    this.main_visual_img = main_visual_img;
    this.main_visual_desc = main_visual_desc;
    this.main_visual_title = main_visual_title;
  }
}

HTML：

<section style="text-align:center">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <visual-item></visual-item>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    </a>
  </div>
</section>

Answer 1

组件的选择器为app-root。

只需将<visual-item></visual-item>替换为<app-root></app-root>。

所以你的代码将是：

<section style="text-align:center">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <app-root></app-root>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    </a>
  </div>
</section>

Answer 2

只是组件＆lt; - ＆gt;模板绑定问题。

不能工作：

<aria-selected="{{first}}" aria-hidden="{{last}}" aria-controls="SliderItem0{{i+1}}" data-target="#carousel-example-generic" data-slide-to="{{i}}">

使用：

<[attr.aria-selected]="first" [attr.aria-controls]="'SliderItem0'+(i+1)"  data-target="#carousel-example-generic" [attr.data-slide-to]="i">

角度组件不呈现

2 个答案: