Question

我在这里有一些相当简单的代码：

<abc-richtexteditor
 matInput
 placeholder="Content"
 id="{{ (subsection.id) + '-editor' }}"
 required
 [canEdit]="canEditFeature"
 [initialValue]="subsection.content">
</abc-richtexteditor>

以上内容会破坏组件<abc-richtexteditor>中的代码，但如果我只是在true内部对*ngIf进行硬编码，那么它可以正常工作。

<abc-richtexteditor
 *ngIf="true"
 matInput
 placeholder="Content"
 id="{{ (subsection.id) + '-editor' }}"
 required
 [canEdit]="canEditFeature"
 [initialValue]="subsection.content">
</abc-richtexteditor>

错误：

ERROR TypeError: Cannot read property 'getContent' of undefined
    at RichtexteditorComponent.get

与：

有关

get value (): string {
    return this.editor.getContent();
}

与：

有关

<editor
 test="test"
 name="editor"
 apiKey="test"
 [initialValue]="initialValue"
 [init]="config">
</editor>

与：

有关

get config() {
    return  {
        ...
        setup: (editor) => {
            this.editor = editor;
        }
        ...
    }
}

有什么想法吗？

Answer 1

我将尝试描述角度组件生命周期（OnInit，AfterViewInit）。想象一下，你有三个组成部分。 A，B，C。

在A组件模板中，您有以下内容：

<B [someInput]="valueFromAComponent"></B>

在B组件模板中：

<C [someInput]="valueFromBComponent"></C>

您的组件周期如下：

组件A构造函数。
组件B构造函数。
组件C构造函数。
组件A ngOnInit。
组件B ngOnInit。
组件C ngOnInit。
组件C ngAfterViewInit。
组件B ngAfterViewInit。
组件A ngAfterViewInit。

在ngOnInit上传递所有输入值，因此您应该在子组件中使用ngIf，直到您的父组件设置输入值。

如果您设置了未初始化的任何值，则角度更改检测将在C组件内部运行，并抛出cannot read property x of undefined之类的异常。

因此，如果您的子组件依赖于父组件的某些输入，则应使用ngIf，直到该值具有正确的值。

我希望这可以帮助您解决问题：）。

Answer 2

它正在使用ngif，因为在所有内容都是init并且值为true之前，angular不会创建带有ngif的视图。

因此，当你的html呈现时，你的内容值看起来是未定义的。

请您发布代码，如何设置subsection.value

将ur config（）代码移动到你的conponent类中的onInit（）

删除* ngIf中断，硬编码“true”有效

2 个答案: