使用templateUrl模板(Use template with templateUrl)

使用templateUrl模板(Use template with templateUrl)

我有这样的组件：

@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组件中。我该怎么做？ 如果我有内联模板，那么我可以这样做，如下所示。但我在DrawingsComponent上使用templateUrl 。

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

I have a component like this :

@Component({ templateUrl: './drawings.component.html', animations: [appModuleAnimation()], styleUrls: ['./styles.css'], }) export class DrawingsComponent extends AppComponentBase implements OnInit { }

And another component like this :

@Component({ selector: 'gallery', template: ` <div class="modal fade" id="selectedImageModal" > </div> `, styles: [` `] }) export class GalleryComponent { @Input() datasource; selectedImage; setSelectedImage(image) { this.selectedImage = image; } }

So now I need to inject the gallery component into the DrawingsComponent component.How can I do that ? If I have inline template then I can do that as shown below.But I'm using templateUrl on DrawingsComponent.

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

最满意答案

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

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

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

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

You can use same thing in your drawings.component.html (in template or templateUrl)

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

Templates are linked with their components so they can access the properties/methods declared on the components.

In this case, you are passing the images from your DrawingsComponent as the input of your GalleryComponent which should work okay.