Question

我有2个组件： HomeComponent和UserComponent。

home.component.ts：

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {

      constructor(private router: Router) { }
      users =  ['User1', 'User2', 'User3']
      selectedVal = ''

      ngOnInit() {
      }
      onChange(newValue) {
        this.selectedVal = newValue 
      }
    }

home.component.html：

<select class="custom-select custom-select-lg mb-3 content" [(ngModel)]="selectedVal" (ngModelChange)="onChange($event)" >

       <option [value]="i" *ngFor="let i of users"> {{i}}  </option>
    </select>
     <h1> Selected value is : {{selectedVal}} </h1>

当在列表中选择一个值时，我想将变量selectedVal从HomeComponent发送到UserComponent。

我试图学习Angular，我该怎么做？

Answer 1

如果HomeComponet和UserComponent不在父子关系中，您应该在它们之间使用通信服务。

您创建一个服务，然后您可以将它注入两个类。这样，数据将存储在服务中。

如果您需要查看更新事件，则可以通过EventEmitter发出值。

Check out the documentation如何实施这些。

在Angular 5中将组件中的变量发送到另一个组件

1 个答案: