angular ngProjectedAs在作为静态主机属性使用时无法正常工作,请检查是否正确使用,

sqserrrh  于 4个月前  发布在  Angular
关注(0)|答案(5)|浏览(57)

哪个@angular/*包是bug的来源?

core

这是一个回归吗?

描述

https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments
这篇文章介绍了ngProjectedAs主机属性作为一种管理更复杂内容投影挑战的方法。
我相信,如果我将其设置为组件主机属性内的静态主机属性,这应该可以正常工作,因为它是一个分配给主机的静态属性。
下面的示例演示了问题:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProjectToComponent, ProjectAsHostComponent],
  template: `
<h2>In line ngProjectAs</h2>
<project-to>
<div ngProjectAs="[projectedElement]">I should be projected</div>
</project-to>

<h2>Static host property ngProjectAs</h2>
<project-to>
<project-as-host/>
</project-to>
`,
})
export class App {
  name = 'Angular';
}

with project-as-host具有以下源代码:

import { Component } from '@angular/core';

@Component({
  selector: 'project-as-host',
  standalone: true,
  host: {
    ngProjectAs: '[projectedElement]',
  },
  template: `
<p>I should be projected</p>
`,
})
export default class ProjectAsHostComponent {}

一个有趣的观察。
如果我将主机属性更改为ngProject并省略As,在html中我看到了以下正确的静态绑定:

<project-as-host ngproject="[projectedElement]"><p>I should be projected</p></project-as-host>

请提供一个最小复现bug的链接

https://stackblitz.com/edit/stackblitz-starters-tzechz?file=src%2Fmain.ts

请提供您看到的异常或错误

There is no error. The content is just not projected anywhere.

请提供您发现此bug的环境(运行ng version)

Angular CLI: 17.3.5
Node: 18.18.0
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.5
@angular-devkit/build-angular   17.3.5
@angular-devkit/core            17.3.5
@angular-devkit/schematics      17.3.5
@schematics/angular             17.3.5
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4

还有其他吗?

这样做的动机是为了解决当前与select的内容投影仅限于硬编码字符串的问题。这是我们在spartan/ui的select组件中尝试实现的目标,理想情况下,用户安装依赖项后可以配置一个自定义组件作为触发器进行投影。更多信息请查看: goetzrobin/spartan#252

yqhsw0fo

yqhsw0fo1#

@pkozlowski-opensource please let me know if there is anything I can do to support this effort! Thanks already!

vulvrdjw

vulvrdjw2#

@pkozlowski-opensource只想跟进一下,看看我们是否能为这个开发做些什么。

zbsbpyhn

zbsbpyhn3#

@goetzrobin 主机绑定对内容投影没有任何影响(例如:向主机绑定添加属性也不会匹配用于投影的节点)。从这个意义上说,我们不希望为ngProjectAs添加例外。相反,我们应该在有人尝试将ngProjectAs用作主机绑定的情况下出错。

thtygnil

thtygnil4#

感谢您的更新。@pkozlowski-opensource,您是否有任何想法可以在不重复添加ngProject的情况下实现所描述的目标?或者这只是对Angular框架的限制吗?

vmdwslir

vmdwslir5#

你有没有想过在不重复添加ngProject的情况下实现描述的目标?或者这只是对Angular框架的限制?
增加 ngProjectAs 是正确的方法。我不会称之为限制,而是明确的设计选择。要投影的内容是组件作者和组件用户之间的合同。重要的是,这个合同在模板中应该是明确的,这样我们才能理解发生了什么。

相关问题