提供全局配置，来配合自定义主题的@ant-prefix。

[yxxuweb]

What problem does this feature solve?

给用户自定义需求。来解决微前端中，样式冲突等问题

What does the proposed API look like?

通过依赖注入

[zorro-bot[bot]]

Translation of this issue:

Provides global configuration to fit a custom theme @ ant-prefix.

What problem does this feature solve?

To user-defined requirements. To solve problems in the front-end micro-style conflict

What does the proposed API look like?

Dependency injection

[zorro-bot[bot]]

Hello @yxxuweb. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @yxxuweb, 我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

[stygian-desolator]

I would like to support this feature, but many files will be modified and many conflicts may arise. Is it possible to update in 10.2, or put it in a major version as a new feature?

[vthinkxie]

I would like to support this feature, but many files will be modified and many conflicts may arise. Is it possible to update in 10.2, or put it in a major version as a new feature?

it is ok to add this in a minor version since it won’t bring any break changes to users

[stygian-desolator]

I will use @Input() @WithConfig() prefixCls = 'ant' to get the prefixCls in NZ_CONFIG

But if I want to deal with the class bound to the host, should I use the form of function?

eg:

host: {
  '[class.ant-btn]': `true`,
  '[class.ant-btn-primary]': `nzType === 'primary'`,
}

==>

host: {
  "[class]": "hostClass"
}

// ...

get hostClass() {
  const _class = [];
  _class.push(`${this.prefixCls}-btn`);
  this.nzType === 'primary' ? _class.push(`${this.prefixCls}-btn-primary`);
  return _class.join(' ');
}

[vthinkxie]

I will use @Input() @WithConfig() prefixCls = 'ant' to get the prefixCls in NZ_CONFIG

But if I want to deal with the class bound to the host, should I use the form of function?

eg:

host: {
  '[class.ant-btn]': `true`,
  '[class.ant-btn-primary]': `nzType === 'primary'`,
}

==>

host: {
  "[class]": "hostClass"
}

// ...

get hostClass() {
  const _class = [];
  _class.push(`${this.prefixCls}-btn`);
  this.nzType === 'primary' ? _class.push(`${this.prefixCls}-btn-primary`);
  return _class.join(' ');
}

getter won't work in the OnPush mode, unless u can track all changes related to the getter fn, and call markForCheck when param in the getter change

[stygian-desolator]

I will use @Input() @WithConfig() prefixCls = 'ant' to get the prefixCls in NZ_CONFIG But if I want to deal with the class bound to the host, should I use the form of function? eg:

host: {
  '[class.ant-btn]': `true`,
  '[class.ant-btn-primary]': `nzType === 'primary'`,
}

==>

host: {
  "[class]": "hostClass"
}

// ...

get hostClass() {
  const _class = [];
  _class.push(`${this.prefixCls}-btn`);
  this.nzType === 'primary' ? _class.push(`${this.prefixCls}-btn-primary`);
  return _class.join(' ');
}

getter won't work in the OnPush mode, unless u can track all changes related to the getter fn, and call markForCheck when param in the getter change

is there any other more suitable way 🤔 I can't think of other good ways.

[ZoeyZhong]

请问这个功能是否已经支持了？我看源码中似乎还是没有改变。 设置了@ant-prefix虽然已经修改了属性名称，但是对应html中class的属性名称还是之前的。

[Ludidi]

同问，在微前端中如何解决ng-zorro样式冲突

[imaliouris]

We could also use @HostBinding i.e.

@HostBinding('class')
get hostClass() {
  const _class = [];
  _class.push(`${this.prefixCls}-btn`);
  this.nzType === 'primary' ? _class.push(`${this.prefixCls}-btn-primary`);
  return _class.join(' ');
}