Question

我试图在父组件的html中设置组件的宽度和高度以及它的初始声明。拥有以下组件标记（在父级的html中）：

<app-ipe-artboard [artboard]="artboard" [ngStyle]="setStyle()"></app-ipe-artboard>

其中setStyle()是画板组件（本身）上的方法：

@Component({
    selector: 'app-ipe-artboard'
})
export class ArtboardComponent implements OnInit {
    @Input() public artboard: Artboard;

    ngOnInit() {
    }

    setStyle(): object {
        return {
            width: this.artboard.width + 'px',
            height: this.artboard.height + 'px'
        };
    }
}

是否有可能实现此方法（不是我现在提出的方式，因为它会连续产生编译时错误和不需要的运行时行为）？或者是在这个地方渲染时尚未实例化的组件，是否需要以某种方式完成不同的工作？

Answer 1

问题是，现在父组件正在寻找它自己的cpny <- c("Fakeco1", "Fakeco2", "Fakeco3", "Fakeco4", "Fakeco5", "Fakeco6") state <- c("CA", "NY", "WA", "CA", "CA", "NY") public <- c("Y", "Y", "N", "N", "N", "N") color <- c("White", "Red", "Green", "Green", "Green", "Red") revs <- c(400, 200, 900, 500, 200, 120) df <- data.frame(cpny, state, public, color, revs) # Convert to SparkR dataframe df_s <- as.DataFrame(df) group_vars <- c('state', 'public') function_params <- list(df_s) for (i in range(1:length(group_vars))) { function_params[[i+1]] <- group_vars[i] } summarized<- do.call(SparkR::groupBy, function_params) %>% SparkR::summarize(sum_Revs = sum(df_s$revs)) SparkR::head(summarized)方法而没有找到任何方法，因此它会引发运行时错误。 setStyle上的方法作用于该组件，父级无法访问（除非您将对该组件的引用传递给父组件，这对清除它没有太大作用）。

解决方案1 

假设您要查找的行为是根据app-ipe-artboard上的变量设置子组件的宽度和高度，您可以使用@HostBinding完成此操作。

artboard

解决方案2

另一种方法是，由于父级中有@Component({ selector: 'app-ipe-artboard' }) export class ArtboardComponent implements OnInit { @Input() public artboard: Artboard; @HostBinding('style.width') artboardWidth; @HostBinding('style.height') artboardHeight; ngOnInit() { this.artboardWidth = artboard.width; this.artboardHeight = artboard.height; } }，所以只需将artboard方法移动到父组件即可。

父组件

setStyle

解决方案3
从Gunter的回答here。

您需要传递与添加到元素相同的值并清理样式。

Gunter提供的示例代码：

@Component({
  template: `<app-ipe-artboard [artboard]="artboard" [ngStyle]="setStyle()"></app-ipe-artboard>`
})
export class ParentComponent {
  artboard: Artboard = {width: 500, height: 300};

  setStyle() {
    return { width: this.artboard.width + 'px', height: this.artboard.height + 'px' }
  }
}

角度组件标签绑定方法

1 个答案: