Question

我只是从子组件输出一些内容，我想知道如何在此之后将父模板中的元素传递给父组件。

通常我会创建一个元素的变量（在这种情况下为#textArea），但不知怎的，我无法传递它。有人知道这是怎么做的吗？

父模板：editReview（$ event，textArea）是从子组件发送的函数。我在editReview功能中收到$ event部分，但不是元素引用。

<app-review-list [movie]="movie" (editReview)="editReview($event, textArea)"></app-review-list>

    <hr>

    <form ngNativeValidate (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="form-group">
            <label for="review">Write A Review:</label>
            <textarea
                    #textArea
                    (keyup.enter)="onSubmit(f)"
                    rows="4"
                    cols="50"
                    type="text"
                    id="review"
                    ngModel
                    class="form-control"
                    name="review"
                    required
            ></textarea>
        </div>
        <button type="button" class="btn btn-danger" (click)="onClear(f)">Clear</button>
        <button class="btn btn-primary" type="submit">Save</button>
    </form>

这是父组件。在editReview方法中，console.log（内容）给了我想要的结果，但是其他console.log没有给我任何东西

import {Component, ElementRef, Input, OnInit} from "@angular/core";
import {NgForm} from "@angular/forms";
import {ReviewService} from "./review.service";
import {ActivatedRoute} from "@angular/router";


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

export class ReviewComponent implements OnInit{

    movieId;
    @Input('movie') movie;


    constructor(private reviewService: ReviewService, private route: ActivatedRoute){}


    editReview(content, elem){
        console.log(content);
        console.log(elem)
    }


}

Answer 1

如果在结构指令中任何位置的元素（例如temple reference variable）上设置了模板引用变量，则将*ngIf传递给方法会出现问题。

如果您的实际代码（不是已发布的代码段）中有结构指令，则可解释此问题。如果不这样做，则不清楚为什么它不起作用。

在任何一种情况下，另一种方法是使用ViewChild装饰器。

父组件

在父组件中，添加以下声明：

@ViewChild('textArea') myElementRef: ElementRef;

并按如下方式修改editReview方法：

editReview(content){
    console.log(content);
    console.log(this.myElementRef);
}

输出子组件

1 个答案: