什么时候应该将 ng-content 和组件模板与输入一起使用，有什么区别？

Question

在父级中使用 ng-content 和使用 childcomponent 选择器有什么区别？

我真的想不通什么时候以及为什么会出现一个或另一个。

示例：

//Parent
@Component({
    selector: 'app-parent',
    template: '<app-child [text]="'lorem ipsum'"></app-child>',
})

//Child
@Component({
    selector: 'app-child',
    template: '<p>{{text}}</p>',
})
// ... component class with "@Input() text"

对比

@Component({
    selector: 'app-parent',
    template: '<app-child>
                   <p>lorem ipsum</p>
               </app-child>',
})

//Child
@Component({
    selector: 'app-child',
    template: '<ng-content></ng-content>',
})

Answer 1

正如您从示例中看到的，内容投影与 Input 有点不同。

使用 ng-content，您将组件从 parent 投影到 child，并且您无法在 child 组件上使用该数据。

相反，对于 Input，数据由 parent 提供，但您可以修改它以适合您的 UI，并且您应该为传入的数据添加签名并对其进行处理。

Es:

@Input() yourData: YourInterface | YourType

而对于内容投影 (ng-content)，这是不可能的，因为您只能从上方绘制元素，而 child 不知道 什么是。他的逻辑是：收到什么就画什么，不管什么。

什么时候应该将 ng-content 和组件模板与输入一起使用，有什么区别？

When should you use ng-content and component template with inputs and whats the difference?

html

components

typescript

angular