Question

我试图在一个组件中调用一个函数，将一些数据发送到另一个组件中的函数，完成一些操作并将数据发送回原始组件。这些组件是兄弟姐妹。我的问题是Angular似乎不喜欢一个html文件中的多个引用变量，说我的一个引用变量是未定义的。有什么想法吗？

HTML

<docked-component-picker #compPicker (onComponentRelease)="grid.getMousePosition($event)" [(model)]="model" *ngIf="model.pageState == 1"></docked-component-picker>
<grid #grid (onGetReleaseBack)="compPicker.setNewComponentPosition($event)" [(model)]="model.layout" [editable]="model.pageState" [currentResponsiveRestriction]="model.currentResponsiveRestriction"></grid>

停靠组分-picker.ts

@Component({
    selector: 'docked-component-picker',
    templateUrl: './docked-component-picker.component.html',
    providers: [ComponentService]
})

export class DockedComponentPickerComponent {
@Input()
private model: Page;

@Output()
private onComponentRelease: EventEmitter<any> = new EventEmitter();

private components;

private currComponent;

private dragging: boolean;

private parentWidth;

constructor(private _componentService: ComponentService, private _componentFactoryResolver: ComponentFactoryResolver, private _elementRef: ElementRef) {
    let promise = this._componentService.getComponents().then(response => {
        this.components = JSON.parse(response._body);
    });
}

@HostListener('window:mouseup', ['$event'])
onMouseup(event) {
    console.log(event);
    if (this.dragging) {
        this.dragging = false;

        this.onComponentRelease.emit(event);
    }
}

public setNewComponentPosition(event) {
    let pc = new PageComponent({
        component: this.currComponent.template,
        componentId: this.currComponent.id,
        pageId: this.model.id,
        responsiveRestrictions: [
            new ResponsiveRestriction({ sizeType: 0, positionX: event.x, positionY: event.y }),
            new ResponsiveRestriction({ sizeType: 1, positionX: event.x, positionY: event.y }),
            new ResponsiveRestriction({ sizeType: 2, positionX: event.x, positionY: event.y }),
        ],
    });
    this.model.layout.addPageComponent(pc, this.model.currentResponsiveRestriction);
}

/**
* Converts the given container's raw pixel position to grid co-ordinates
 * @param source - the container to convert
*/
private convertToGridPosition(x, y): Position {
    return new Position(Math.round(x / (this.parentWidth / this.model.layout.width)), Math.round(x / this.model.layout.rowHeight));
}

public createComponent(component): void {
    this.currComponent = component;

    this.dragging = true;
}

grid.component.ts需要的部分

@Output()
    private onGetReleaseBack: EventEmitter<Position> = new EventEmitter();

public getMousePosition(event) {
    let pos = new Position(Math.round(event.offsetX / (this.parentWidth / this.model.width)), Math.round(event.offsetY / this.model.rowHeight));
    this.onGetReleaseBack.emit(pos);
}

错误

ERROR TypeError：无法读取属性＆＃39; setNewComponentPosition＆＃39;未定义的 at Object.eval [as handleEvent]（PageComponent.html：4）在handleEvent

Answer 1

停靠组件选择器和网格都位于同一组件内。您正试图从网格发射器功能中捕获事件＆＃34; onGetReleaseBack＆＃34;在DockedComponentPickerComponent中执行一些逻辑。

如果我的理解是正确的，我建议这就是：在您的组件中 DockedComponentPickerComponent 用@Input替换函数 setNewComponentPosition ：

@Input() set componentPosition(event){
    if(event){
        //setNewComponentPosition  logic here
    }        
}

然后你需要做一些其他的调整才能发挥作用。在父模板中，替换您的

<grid #grid 
      (onGetReleaseBack)="setNewComponentPosition($event)" 
      [(model)]="model.layout" 
      [editable]="model.pageState" 
      [currentResponsiveRestriction]="model.currentResponsiveRestriction">
</grid>

在父组件中，您需要创建一个名为setNewComponentPosition的新函数，它将更新类属性＆＃34; componentPosition＆＃34;你还需要声明

setNewComponentPosition(newPosition){
    this.componentPosition = newPosition;
}

最后在父模板中，您需要更新docked-component-picker ...以包含新创建的属性，如下所示：

<docked-component-picker #compPicker 
     [componentPosition]="componentPosition"
     (onComponentRelease)="grid.getMousePosition($event)" 
     [(model)]="model" 
     *ngIf="model.pageState == 1"></docked-component-picker>

Answer 2

问题在于我们一起使用ngIf和#compPicker。当视图初始化时，似乎还没有出现compPicker，因此该变量将是未定义的。

一种解决方案是在父组件中添加ViewChild以访问使用ngIf的子组件：

@ViewChild('compPicker') compPicker: ElementRef;

另一种解决方案可能是使用[hidden]="model.pageState != 1"而不是ngIf。

多个模板参考变量 - Angular 2和TypeScript

2 个答案: