如何为我的自定义组件指定在输入消息中显示值的位置？

Question

我正在 ionic/angular 中构建一个值选择器组件，但是我对传递给该组件的 message/title 有一个问题。我希望能够指定当前所选值在消息中的显示位置。

我考虑过在消息字符串中传递一些标记，如 %value% 以供组件处理。但是，必须有更标准的方法来处理这个问题吗？

在下面的快照中，我希望 <ion-badge> {{Value}} </ion-badge> 显示在 X 所在的位置。

<div class="ValueSelector_Container">
    <div class="Message">
        <ion-label>{{Message}} <ion-badge> {{Value}} </ion-badge> </ion-label>
    </div>
    
    ...

我是这样 invoking/hosting 当前组件的。我最终会处理实际选择值的输出

 <ValueSelectorComp Message="Play X minutes before switching to bla bla" ></ValueSelectorComp>

我在这里通过 stackblitz 添加了代码复制

如果你有一个可用的 fix/suggestion，请 fork 并报告 link。谢谢。

https://stackblitz.com/edit/ionic-fx1ktl?file=pages%2Fhome%2Fhome.ts

Ionic:

   Ionic CLI          : 6.13.1 (C:\Users\AXM\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 7.0.0, browser 5.0.3
   Cordova Plugins   : cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : not installed

System:

   NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

npm show ionic version
5.4.16
npm show cordova version
11.0.0
npm show angular version
1.8.2
show @angular/core version
13.1.1

Answer 1

对我有用

home.html

<ValueSelectorComp
    Message="Play {{Value}} minutes before switching to bla bla"
    (MessageValue)="valueHandler($event)"
  ></ValueSelectorComp>

home.ts

Value: number;
valueHandler(val: number) {
    this.Value = val;
  }

ValueSelectorComp.html

<div class="ValueSelector_Container">
  <div class="Message">
    <ion-label>{{Message}}</ion-label>
  </div>
</div>

ValueSelectorComp.ts

ngOnInit() {
    this.MessageValue.emit(this.Value);
  }
 @Output() MessageValue: EventEmitter<number> = new EventEmitter();

link: stackblitz.com/edit/ionic-dvsqjg?file=pages/home/home.ts

Answer 2

您可以使用内容投影来传递数据

<div class="ValueSelector_Container">
<div class="Message">
    <ng-content> <ng-content>
</div>

并在父组件中

<ValueSelectorComp >
 <ion-label>Play <ion-badge> {{Value}} </ion-badge> minutes before 
  switching to bla bla  </ion-label>
 
</ValueSelectorComp>

Answer 3

虽然我没有在原始 post 中明确说明它是一项要求，但我的大脑 leaning/struggling 朝着

的解决方案发展

组件客户端选择值在组件中显示的消息中的位置，
但是组件最终控制用于显示消息和值的布局和标签的选择。
Message和Value由客户端获取，最终Value由组件返回。

为了这个想法，我破解了以下“解决方案”

工作示例在这里 https://stackblitz.com/edit/ionic-xzdgyb?file=pages%2Fhome%2FValueSelectorComp.html

在@Dindayal 解决方案中，位置由组件客户端决定，但组件几乎无法控制消息中值的布局。

在@Mohammad 解决方案中，位置和布局均由组件客户端决定

我想我见过DOM/template 注射技术 domsanitizer？也许这可以在解决方案中发挥作用，但这不是我可以自然编码的东西:)

如何为我的自定义组件指定在输入消息中显示值的位置？

How do I specify to my custom component where a value is displayed within a input message?

typescript

ionic3

angular