Question

我在angular2中开发了一个应用程序，其中一个组件（组件栏）通过读取json对象显示angular2组件的缩略图列表。

我添加了click event，它会将组件名称传递给click事件函数clicked(comp.name)，并在控制台上输出组件的名称。

现在我想要渲染在另一个组件（设计器）的模板中单击了缩略图的组件。我已经在不同的文件夹中设计了这些组件，并生成了我在JSON对象下创建的缩略图。

"components": [
  {
      "name":"HeadingComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/ABC_bank.png",
      "cmpLocation":"components/heading/heading.component.ts",
      "isDynamic":"true"          
  },
  {
      "name":"BodyComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/demoairline.png",
      "cmpLocation":"components/heading/body.component.ts",
      "isDynamic":"true" 
  },
  {
      "name":"FooterComponent",
      "desc":"",
      "cmpType":"Standard",
      "imgUrl":"http://localhost:3202/uploads/SCE_5.PNG",
      "cmpLocation":"components/heading/footer.component.ts",
      "isDynamic":"true" 
  }    
]

应用的当前用户界面如图所示：

以下是我的应用的代码：

组件的一个bar.html

<input class="form-control input-sm" [(ngModel)]="searchComp" type="text" placeholder="Search Components..." />
<div id="sidebar-scroll" *ngIf="record != undefined">
    <div class="text-xs-bold" style="text-align: left; margin-top: 0px; padding: 0px; height:100%">
        <ul style="background-color:transparent;overflow: hidden">
            <li *ngFor="#comp of record.components | search:searchComp:true" style="display:block;padding:0px;cursor:move;position:relative;margin-top:5px;margin-bottom:5px"
        title="{{comp.name}}">
                <p class="text-center h6" style="font-size:8px;color:blue;font-weight:bold;"> {{comp.name }}</p>
                <img class="img-thumbnail1" src="{{comp.imgUrl}}" style="max-width:100%;" (click)="clicked(comp.name)">
            </li>
        </ul>
    </div>
</div>

组件bar.component.ts

@Component({
selector: 'component-bar',
pipes:[SearchPipe],
providers: [DragulaService],
directives: [Dragula],
templateUrl: 'app/designer/component-bar/component-bar.component.html'
})

export class ComponentBarComponent implements OnInit {
    @Input() record: Object;        
    constructor() {    
    }

    ngOnInit() {
        //console.log(this.record);
    }

    clicked(compName) {
        console.log(compName);//this prints component name correctly
    }

}

我尝试集成ng2-dragula模块以提供拖放功能。但是无法取得任何成功。

我搜索了很多文章，但找不到任何有用的东西。我正在尝试开发的功能是否有任何模块或工作演示？提前致谢

angular2从另一个组件的click事件更新一个组件的模板

0 个答案: