Angular6控制其他组件中的对象

Question

我在sidenav内容区域中将仪表板组件嵌套为路由器页面。这是文件和组件的结构。

app.component
   dashboard.component
      <mat-sidenav-container>
         <mat-sidenav-content>
            <router-outlet>
   cards.component
      <mat-card #Advance>

我已经从dashboard.component导入了cards.component ...

import { CardsComponent } from '../cards/cards.component';
…
constructor(…, private Card: CardComponent) {}

在纸牌组件中，我有席卡，我希望能够根据侧面导航中的动作移动。因此，他们的HTML有一个句柄#myCard ...

<mat-card #myCard class="myClass"></mat-card>

在.css的myClass内，我具有“ position：absolute;”。如何通过仪表板中的功能控制#myCard？例如，如果我要将其从侧面导航内容区域的20％开始移动到40％...

moveCard(xPos : string){
   this.Card.myCard.left = xPos;
}

当我打电话时，是这样的：

this.moveCard('40%');