Question

我正在使用基于Angular 1.6组件的方法构建应用程序。我有一篇文章＆＃34;包含＆＃34;块＆＃34;的组件组件，我想在ng-repeat循环中将数据从文件传递到块，但无法实现：这是我的文章模板：

<md-content class="article-detail">
  <div layout="row">
    <div flex="20"></div>
    <div layout="column" flex="60" layout-align="center center">
      <div class="article-preview">
        <div class="article-photo">
          <img ng-src="{{$ctrl.article.image}}"/>
        </div>
        <h1 class="article-info">ARTICLE</h1>
      </div>
      <div class="article-content">
        <h1>{{$ctrl.article.title.toUpperCase()}}</h1>
      </div>
      <article-block ng-repeat="block in $ctrl.article.blocks" block="block"></article-block>
    </div>
  </div>
  </div>
  <div flex="20">
  </div>
  </div>
</md-content>

我还想确定块类型以返回相应的模板，这是我的块组件：

import controller from './block.controller'
import venueBlock from './venue-block.html';
import imageBlock from './image-block.html';
import titleBlock from './title-block.html';
import contentBlock from './content-block.html';

let views = {venueBlock, imageBlock, titleBlock, contentBlock};

let articleBlockComponent = {
  bindings: {
    block: '<'
  },
  controller,
  template: function ($attrs) {// $attrs.block === 'block' it is a string, but not an object
    'ngInject';
    return views[$attrs.block.type + "Block"];
  }
};
export default articleBlockComponent;

这是我的控制器：

class ArticleBlockController {
  constructor() {
    'ngInject';
    console.log(this.block);//undefined
  }
}
export default ArticleBlockController;

我花了很多时间试图找出错误，但我仍然没有看到它。我是Angular的新手，非常感谢你的帮助

Answer 1

组件控制器初始化后，组件绑定不会反映在控制器上下文中。您可以在组件的$onInit生命周期钩子中附加绑定。

class ArticleBlockController {
  constructor() {
    'ngInject';
  }
  $onInit(){
    console.log(this.block);
  }
}

如果您希望以这种方式使用您的组件，那么您必须在$compileProvider中调整一些设置，您必须在其中启用preAssignBindingsEnabled。

$compileProvider.preAssignBindingsEnabled(true);

注意：设置preAssignBindingsEnabled不是您应该在您的网站中进行的首选方式应用。基本上，已经引入了使Angular 1组件看起来与Angular 2组件API相同的组件。迁移它会使您的工作变得更加容易。

无法使用ng-repeat

1 个答案: