在Angular中，可以通过设置组件上的flex-direction属性来改变其布局方向。默认情况下，flex-direction属性的值为"row"，表示水平方向布局。

要将布局方向改为垂直方向，可以将flex-direction属性的值设置为"column"。以下是一个具体的代码示例：

  
Item 1
  
Item 2
  
Item 3

在上面的示例中，我们使用了一个容器div，并设置了其flex-direction属性来控制布局方向。通过使用属性绑定的方式，我们可以根据条件来动态改变flex-direction属性的值。

在组件的类型Script代码中，我们需要定义一个布尔类型的变量isVertical，并在需要改变布局方向时将其设置为true，否则设置为false。

export class MyComponent {
  isVertical: boolean = false;

  // 在适当的时机调用该方法来改变布局方向
  toggleLayoutDirection() {
    this.isVertical = !this.isVertical;
  }
}

在上面的代码中，我们定义了一个名为isVertical的变量，并初始化为false。我们还提供了一个名为toggleLayoutDirection的方法，当它被调用时，会切换isVertical的值。

通过调用toggleLayoutDirection方法，可以在运行时改变布局方向。这将导致flex-direction属性的值发生变化，从而改变组件的布局方向。

希望以上解决方法能够帮助到您！