Angular12 Attributes failing to pass from parent to child in production

huangapple go评论94阅读模式
英文:

Angular12 Attributes failing to pass from parent to child in production

问题

我有一个组件库,我已经构建好了,然后将这些组件导入到另一个项目中。

在我测试该库的应用程序中,我只是直接从库中导入,一切都工作得很完美。

CompPar是父组件。

CompChild位于父组件的HTML模板内。

当我使用CompPar时,它位于其他组件内。我正在传递一个名为"label"的变量。

<compar label="你好!">

在库项目中,一切正常。标签从父组件传递到子组件,并且子组件可以使用它。

但是在我将它们导入到的项目中,这不起作用。标签没有传递到子组件。尝试传递像这样的每个属性都失败了,除了id,出于某种原因它有效?

感觉好像在编译时出了什么问题?我尝试了一些帖子中看到的"buildOptimizer": false,但要么我把它完全放错了地方(在tsconfig.lib.prod.json的"angularCompilerOptions"下,angular.json文件在配置中调用这个文件),要么这不是问题。

真的需要一些帮助,谢谢!

CompPar.ts:

@Component({
  selector: 'lo-dropdown',
  templateUrl: 'dropdown.component.html'
})

export class Dropdown {
  @Input() label: string;
  @Input() id: string;

  constructor(public utils: Utils, private logger: Logger, private elemRef: ElementRef){}
}

CompPar.html:

<lo-input [attr.id]="id+'_input'" [label]="label">	

CompChild.ts:

@Component({
  selector: 'lo-input',
  templateUrl: 'input.component.html'
})

export class InputLo implements OnInit {
  @Input() label: string;
  @Input() id: string;
  ngOnInit(): void {
    console.log("输入中的标签 = " + this.label);
  }
}

CompChild.html:

<label [for]="id">{{label}}</label>
英文:

I have a component library I've built, then imported those components into another project.

Inside of the app that I test the library in, which is just straight importing from the library into itself, everything works perfectly.

CompPar is the parent.

CompChild is inside of the parent's html template.

When I use CompPar, it's inside of other components. I am passing a variable called label.

&lt;compar label=&quot;Hello!&quot;&gt;

In the library project, perfect. Label passes from parent to child and the child uses it.

In the project I'm importing these into, this doesn't work. The label does not pass to the child. It's failing to pass every attribute I try to pass like this EXCEPT the id, which does work for some reason?

It feels like there's something not right when I'm compiling? I tried the "buildOptimizer": false that I've seen in some posts, but either I have it entirely in the wrong place (in the tsconfig.lib.prod.json under "angularCompilerOptions", the angular.json file is calling to this file for configuration) or this isn't the issue.

Really need some help, thank you!

CompPar.ts:

@Component({
	selector: &#39;lo-dropdown&#39;,
	templateUrl: &#39;dropdown.component.html&#39;
})

export class Dropdown {
	@Input() label: string;
	@Input() id: string;

	constructor(public utils: Utils, private logger: Logger, private elemRef: ElementRef){}

}

CompPar.html:

	&lt;lo-input [attr.id]=&quot;id+&#39;_input&#39;&quot; [label]=&quot;label&quot;&gt;	

CompChild.ts:

	@Component({
		selector: &#39;lo-input&#39;,
		templateUrl: &#39;input.component.html&#39;
	})

	export class InputLo implements OnInit {
		@Input() label: string;
		@Input() id: string;
		ngOnInit(): void {
			console.log(&quot;LABEL IN INPUT = &quot; + this.label);
		}
	}

CompChild.html:

	&lt;label [for]=&quot;id&quot;&gt;{{label}}&lt;/label&gt;

答案1

得分: 0

解决方案最终确实在编译中,但并非我曾经预料过的方式。

在父模块中,我正在导入子组件:

import { compchild } from 'library';

declarations: [ comppar, compchild ]

但事实证明,我需要做的是导入子模块,而不是它的组件。

import { compchildmodule } from 'library';

imports: [ CommonModule, compchildmodule ]

这就是为什么它表现得像子组件不存在一样... 因为在某种意义上它确实不存在。

英文:

The solution ended up being indeed in the compiling, but not how I would have ever expected.

In the parent's module, I was importing the child component:

import { compchild } from &#39;library&#39;;

declarations: [ comppar, compchild ]

But it turned out, what I needed to do, was import the child's MODULE, not it's component.

import {compchildmodule } from &#39;library&#39;;

imports: [ CommonModule, compchildmodule ]

That's why it was acting like the child didn't exist... because it didn't, in a sense.

huangapple
  • 本文由 发表于 2023年8月11日 01:00:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76877871.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定