如何正确地将参数传递给角度组件？

Question

我是 Angular 新手，好几天都无法解决问题。

我创建了一个组件，我想在其中传递我需要的参数，但问题是第一个组件正确显示了值，其余元素显示第一个的值。

一开始我尝试这样传递参数：

<app-pr1-button class="grid-item grid-item-1"
                [name]="'name1'"
                [label]="'label1'"
                [text]="'text1'"
                [inputtext]="['m1','m2']"
>
</app-pr1-button>
    <app-pr1-button class="grid-item grid-item-2"
                        [name]="'name2'"
                        [label]="'label2'"
                        [text]="'text2'"
                        [inputtext]="['n1','n2']"
        >
</app-pr1-button>

元素名称显示在父组件中，scss 帮我解决了这个问题，[name] 在两个组件中都正确显示，但弹出的其他参数（我也使用 scss 执行此操作）与第一个完全一样被删除组件，即label1、text1和'm1'、'm2'。

后来我开始像这样传递参数：

<ng-template #temp>
    <h1>label1</h1>
    <p>text1</p>
    <app-input-data [text]="['m1','m2']"></app-input-data>
</ng-template>
<app-pr1-button class="grid-item grid-item-1" [name]="'name1'" [template]="temp"></app-pr1-button>

<ng-template #temp1>
    <h1>label2</h1>
    <p>text2
    </p>
    <app-input-data [text]="['m1','m2']"></app-input-data>
</ng-template>

<app-pr1-button class="grid-item grid-item-2" [name]="'name2'" [template]="temp1"></app-pr1-button>

子 ts：

export class Pr1ButtonComponent implements AfterViewInit{

@Input() template : TemplateRef<any>;
// @Input() label: string | undefined;
// @Input() text: string | undefined;
@Input() name: string | undefined;
// @Input() inputtext: string[] | undefined;
@Input() longread: string | undefined;
@ViewChild('viewcontainer',{read:ViewContainerRef}) viewcontainer : ViewContainerRef;



ngAfterViewInit() {
    this.viewcontainer.createEmbeddedView(this.template);
}


}

子html：

    <a class="button" href="#popup">{{name}}</a>
<p class="longread">{{longread}}</p>
<div class="popup" id="popup">
    <div class="popup-inner">
        <div class="popup__photo">
            <img src=""
                 alt="">
        </div>
        <div class="popup__text">
            <div #viewcontainer></div>
<!--            <h1>{{label}}</h1>-->
<!--            <p>{{text}}</p>-->

        </div>
        <a class="popup__close" href="#">X</a>
    </div>
</div>

如果我从 scss 中删除我的样式，那么这些是我传递的参数，所以我倾向于假设关键是 scss 不允许更新数据。有人可以建议如何解决这个问题吗？

附言

文字：

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600&subset=latin-ext');

$main-color: #9191E9;

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}

@media screen and (max-width: 768px) {
  html, body {
    font-size: 12px;
  }
}
.longread{
  padding-top: 10px;
}
.container {
  background-color: $main-color;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.button {
color: #202230;
  text-decoration:none;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .80);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transition: .64s ease-in-out;
  &-inner {
    position: relative;
    bottom: -100vw;
    right: -100vh;
    display: flex;
    align-items: center;
    max-width: 800px;
    max-height: 600px;
    width: 60%;
    height: 80%;
    background-color: #fff;
    transform: rotate(32deg);
    transition: .64s ease-in-out;
  }
  &__photo {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 40%;
    height: 100%;
    overflow: hidden;
    img {
      width: auto;
      height: 100%;
    }
  }
  &__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
    height: 100%;
    padding: 4rem;
    h1 {
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 2rem;
      text-transform: uppercase;
      color: #0A0A0A;
    }
    p {
      font-size: .875rem;
      color: #686868;
      line-height: 1.5;
    }
  }
  &:target {
    visibility: visible;
    opacity: 1;
    .popup-inner {
      bottom: 0;
      right: 0;
      transform: rotate(0);
    }
  }
  &__close {
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3rem;
    height: 3rem;
    font-size: .875rem;
    font-weight: 300;
    border-radius: 100%;
    background-color: #0A0A0A;
    z-index: 4;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
  }
}

Answer 1

将参数传递给组件始终以相同的方式工作：

1. 在组件代码文件中创建一个 Input 属性：@Input() propertyName: string;
2. 在使用组件的标记文件中设置值：<component [propertyName]="'Hello'"></component>

我在你的例子中可以看到，你做得对，一般来说。

但是还有很多东西可能会导致代码混乱，例如，我永远不会将 TemplateRef 作为输入属性传递给组件。我也不清楚使用 ViewContainerRef 的意图。我的建议是，专注于你想要实现的目标，稍微清理一下，你会发现它会起作用。

Answer 2

好吧，这是一个愚蠢的错误

我改变了这个：

<a class="button" href="#popup">{{name}}</a>
<p class="longread">{{longread}}</p>
<div class="popup" id="popup">

到这里：

<a class="button" href="{{'#'+name}}">{{name}}</a>
<p class="longread">{{longread}}</p>
<div class="popup" id="{{name}}">