如何使用angularjs语法es6在两个组件之间传递数据？

Question

I would like to pass data from the todos component to the todo component and display all elements in the form of a list. I download data from the service and place it in the todos.controller . In todos.component , I use bindings: {todos: '<'} . In the todos.html view, it provides data in the form of todos = $ ctrl.todos . In todo.html , it iterates over todos and wants to return todo.name . Effect: returns only 'Todo' .

todo.service.js

export class TodoService {
  constructor($http) {
  'ngInject';
   this.$http = $http;
 }
  getTodos() {
    return this.$http.get('/api/todos');
  }
}

todos.controller.js

class TodosController {
   constructor(TodoService) {
    'ngInject'
    this.TodoService = TodoService;
   }

    $onInit() {
      this.todos = null;
      this.TodoService.getTodos().then(response => 
        {
           this.todos = response.data;
           console.log(this.todos);
        });

    }
}

export default TodosController;

todo.component.js

import template from './todo.html';
import controller from './todo.controller';
import './todo.scss';

let todoComponent = {
  bindings: {
    todos: '<'
  },
  template,
  controller
};`

export default todoComponent;

todos.html

<h1>Todos</h1>
<ul>
    <todo todos="$ctrl.todos"></todo>
</ul>

todo.html

<div>
    <p ng-repeat='todo in $ctrl.todos track by $index'>Todo: 
     {{$ctrl.todo.name}}
    </p>
</div>

Answer 1

Change todo.html as follows:

<div>
    <p ng-repeat='todo in $ctrl.todos'>Todo: 
     ̶{̶{̶$̶c̶t̶r̶l̶.̶t̶o̶d̶o̶.̶n̶a̶m̶e̶}̶}̶
     {{todo.name}}
    </p>
</div>

Also with todos.html :

<h1>Todos</h1>
̶<̶u̶l̶>̶
    <todo todos="$ctrl.todos"></todo>
̶<̶/̶u̶l̶>̶

The only permitted content of <ul> elements is zero or more <li> elements.

For more information, see

• MDN HTML Reference - <ul> element