标签: components

我创建了一个basicModalComponent，它负责处理基本操作，例如关闭、提交、显示页眉和页脚。将简单的消息放入我的模态正文中效果很好。

但我希望能够传递一个子组件来管理我的身体，如下所示：

this.modal = await this.modalController.create({
  component: BasicModalComponent,
  componentProps: {
    title: `Share!`,
    body: ChildContentViewComponent,
    bodyProps: {... some data here},
    // body: new ChildContentViewComponent({some data here}),
    confirm: this.onConfirmDeleteAction,
    cancelButton: true
  }
});

这将处理一些更复杂的逻辑。

现在，这就是身体在我的中显示的方式basicModalComponent

<p class="modal-body text-center scrollable scrollbar-hidden">
  {{body}}
</p>

显然，它与字符串文本配合得很好，但现在我想在这里放置一个子组件。

结果如下：

如果可能的话，在实例化期间使用来自父级的数据

但我不知道这是否可能或一个好的模式。我认为这是可能的，因为这就是modalController我实际上正在做的事情BasicModalComponent，但我仍然不确定这种模式。我研究过继承和组合，但也没有成功。

您有什么想法/建议吗？提前致谢。

我在手风琴中递归地调用组件以显示树状结构。

该代码适用于短输入，但在嵌套数据的递归调用上滞后

它就像一棵 json 树。

//sample.component.html
<app-tree [input]="data"></app-tree>


//tree.component.html

    <mat-accordion>
        <mat-expansion-panel hideToggle="true" (click)="toggleTree($event, input)">
          <mat-expansion-panel-header>
            <mat-panel-title>
                <mat-icon>{{input.buttonName}}</mat-icon>
                {{input.key}}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <ul class="main-obj">   // tried *ngIf here
             <div class="obj-list" *ngFor="let item of input.value; trackBy: trackChanges">
                <li>
                  {{item.key}}: {{item.value}}
                </li>
                <li style="list-style: none; margin-left: -40px;">
                    <app-tree [input]="item"></app-tree>
                </li>
            </div>
         </ul>
        </mat-expansion-panel>
    </mat-accordion>

//tree.component.ts

    import { Component, OnInit, Input, Output } from '@angular/core';
    import { EventEmitter } from 'events';

    @Component({
      selector: 'app-tree',
      templateUrl: './tree.component.html',
      styleUrls: ['./tree.component.css']
    })

    export class TreeComponent implements OnInit { …

我希望您在另一个隔离日表现出色！

我正在尝试使用 i18n 更改 React 应用程序的语言，但遇到问题。

这是我正在使用的代码片段（此代码位于组件 TopBar.jsx 中）

  function onSelectFlag(countryCode) {
    switch (countryCode) {
      case "US": {
        i18n.changeLanguage("en");
        break;
      }
      case "BR": {
        i18n.changeLanguage("po");
        break;
      }
      default: {
        i18n.changeLanguage("es");
        break;
     }
    }
  }

问题是，这段代码仅更改组件语言，而不更改整个应用程序语言。我做了一些研究，但没有发现任何东西......

有人知道如何解决这个问题吗？

谢谢！

我面临着反应本机的问题。它在模拟器和 iPhone7 上工作正常，但在 iPhone XR 上无法工作。我不确定是否所有 iPhone XR 都会出现这种情况。

第一个来自 iPhone XR，第二个来自模拟器。

正如您在此处看到的，我可以选择文本和清除文本，只是它们不可见。

谁能帮我解决这个问题？

看起来文字是白色的。

我在 Angular-9 应用程序中有 3 个组件，如下所示：

组件1

<div>
   // I have a button here with Click Event.
</div>

组件2

<div>
   // I have a Grid here. 
</div>

In a class file I'm getting Data and Binding Grid using ngOnInit() method.

我在第三个组件中使用这两个组件，如下所示：

组件 3

<div id='third-component'>
    <component-one></component-one>
    <component-two></component-two>
</div>

我想通过单击Component1中的按钮刷新Component2数据。这个怎么做？