多個模板參考變量-Angular 2和TypeScript

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>

停靠組件選擇器

@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);
}

錯誤

錯誤TypeError：無法在handleEvent處讀取Object.eval上未定義的屬性'setNewComponentPosition'[作為handleEvent]（PageComponent.html：4）

Answer 1

對接的組件選擇器和網格都位於同一組件內。 您正在嘗試從網格發射器函數“ onGetReleaseBack”捕獲事件以在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的新函數，該函數將更新您還需要聲明的類屬性“ componentPosition”

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 。