Question

我有这样的组件：

@Component({
    templateUrl: './drawings.component.html',
    animations: [appModuleAnimation()],
    styleUrls: ['./styles.css'],
})

export class DrawingsComponent extends AppComponentBase implements OnInit {
}

还有另一个这样的组件：

@Component({
    selector: 'gallery',
    template: `
    <div class="modal fade" id="selectedImageModal" >

    </div>
    `,
    styles: [`

  `]
})
export class GalleryComponent {

    @Input() datasource;
    selectedImage;

    setSelectedImage(image) {
        this.selectedImage = image;
    }
}

所以现在我需要将gallery组件注入DrawingsComponent组件。我该怎么做？如果我有内嵌模板，那么我可以执行此操作，如下所示。但我在templateUrl上使用DrawingsComponent。

 template: `
    <gallery [datasource]=images></gallery>
  `,

Answer 1

您可以在drawings.component.html（在template或templateUrl中）使用相同的东西

<gallery [datasource]="images"></gallery>

模板与其组件链接，以便它们可以访问组件上声明的属性/方法。

在这种情况下，您将把DrawingsComponent中的图像作为GalleryComponent的输入传递，这应该可以正常工作。

将模板与templateUrl一起使用

1 个答案: