Question

我有一个使用Angular 5的{{1}}网站。

在我的代码分支中，我有一个文件夹，其中包含包含各种数据的部分。

我正在做的是然后有一个主页面显示我曾经要求的部分我已经完成但问题是，是因为我有2个routing文件嵌套在一个它显示我的信息部分在各个方面。

我试过了：

将它们包装在主页上的component.html
浮动：组件上的左/右和DIV
设置宽度

个人详细信息组件html

mat-card

联系详情组件html

  <mat-card>
    <mat-card-title class="firstCard">Personal details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor ID" #id value="101010" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invDoB" placeholder="Date of birth" #dob value="01 January 1950" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invNino" placeholder="National Insurance Number" #nino value="AA112233A" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invMumMaidenName" placeholder="Mother's maiden name" #mummaidenname value="Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invFirstSchool" placeholder="First school attended" #firstschool value="St.Testo" readonly>
        </mat-form-field>
    </mat-card-content>
  </mat-card>

**主页组件html **

  <mat-card>
    <mat-card-title class="secondCard">Contact details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invAddress" placeholder="Address" #address value="'this is a description of the some text' + \n + 'and further description'" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invPhone" placeholder="Telephone number" #tel value="01000 000 000" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invEmail" placeholder="Email address" #email value="test@test.com" readonly>
        </mat-form-field>
    </mat-card-content>
  </mat-card>

Answer 1

尝试使用flex布局，因为您正在使用Angular，请尝试使用Angular Flex Layout.

这会产生这样的结果：

<div fxLayout="row" fxLayoutAlign="start center">
   <app-personaldetails fxFlex="50%"></app-personaldetails>
   <app-contactdetails fxFlex="50%"></app-contactdetails>
</div>

Answer 2

您可以使用mat-grid或flex布局，并使其成为响应式使用observableMedia

角度显示2张卡并排

2 个答案: