无法更新cdk-connected-overlay的最小宽度

时间:2018-10-15 14:30:45

标签: angular angular5 overlay angular-template angular-cdk

我正在为此组件使用模板参考变量。这是我为下拉选项创建叠加层的方式

<ng-template
cdk-connected-overlay
[minWidth]="optionsWidth"
[open]="isOpen"
[origin]="origin"
#optionsContainer
>

<div class="options">
  <ng-content></ng-content>
</div>

即使更新了minwidth值,cdkconnectedoverlay的宽度也不会改变

我尝试使用覆盖层ref对其进行更新,下面是代码

@ViewChild('optionsContainer')
  optionsContainer: CdkConnectedOverlay;

接下来我阅读了overlayref

this.optionsContainer.overlayRef

但这始终是不确定的,任何人都可以用我来帮助我使用角度cdk 5.XX版本

2 个答案:

答案 0 :(得分:0)

添加positionChange属性并尝试代码:

this.optionsContainer.overlayRef.updateSize({minWidth:this.optionsWidth})

答案 1 :(得分:0)

import java.util.Random; import java.util.Scanner; public class S1 { public static void solve_when_given_y(int m_value, int x_value, int b_value) { Scanner input; input = new Scanner(System.in); System.out.println("Given: "); Random rand = new Random(); int high = 101; int low = -100; m_value = rand.nextInt(high - low) + low; x_value = rand.nextInt(high - low) + low; b_value = rand.nextInt(high - low) + low; System.out.println("m = " + m_value); System.out.println("x = " + x_value); System.out.println("b = " + b_value); System.out.print("Your Answer "); double student_answer = input.nextInt(); double calculated = calculate_y(m_value, x_value, b_value); if (student_answer == calculated) { System.out.println("Correct"); } else { System.out.println("Sorry, the answer is " + calculated); } input.close(); } public static void main(String[] args) { int m_value = 0; int x_value = 0; int b_value = 0; solve_when_given_y(m_value, x_value, b_value); } public static double calculate_y(double m_value, double x_value, double b_value) { double y_value = m_value * x_value + b_value; return y_value; } } 仅在附加了叠加层后才存在。 您可以订阅overlayRef事件来确定何时附加事件,然后应用所需的宽度。

attach