问

javascript - angular2的指令标签如何才会被替换？

水急送_113 发布于 2022-11-09 17:41

select

题目描述可能不准确，请原谅，我是刚学NG2的新手。

场景还原：
这是 angular2.4.3 + angular-cli 做的小demo，我定义了一个组件类：

@Component({
  selector: 'side-bar',
  template: `
    
      

        

          ng-movie
          点击此处隐藏container
        
      
    
    `
})
export class sideBarComponent{
  isHideContainer: bollean; // 准备用于控制 container 显示与否，通过 *ngIf
  hideSidebar () {
    // 如何把 p.side-bar 隐藏？
  }
}

在 angular2 中，我无法把组件中的数据isHideContainer添加在上，因为这已经跨组件了，需要用到组件通信。

问题：
问题一：到这里我就很疑惑了，我认为也应该算是组件的一部分，为什么需要组件通信才能对它进行控制？因为我之前学过vue.js，在vue中这问题是不存在的，它会把container元素替换成template，而不是像angular2把template嵌入到container中。

问题二：运行ng build --prod --env=prod后，标签还保留着，没有替换成

，是否故意保留的？

2 个回答

两个问题，其实都是在说一个问题组件。

在Angular应用中是以组件树来组织的，每一个组件都是非常内聚、单一、可测试的。但凡有软件工程的经验，这三点是非常重要的。

而这三点最核心的是数据流向问题，为什么组件之间的通信是依赖于入、出就是出于这一点。

其次，如果你了解Web Components你就会知道 <side-bar> 所代表远比 <p> 更有含义，或许你可以再了解点Shadow DOM，标签的意义简直就是逆天。

2022-11-12 01:42 回答

tbc5052661

写了个在线demo

http://embed.plnkr.co/veU7rSv...

核心代码：

@Component({
  selector: 'my-app',
  template: `
  <p class="side-left" *ngIf="isHideContainer">
      <p>
        <header>
          <h1>ng-movie</h1>
          <h4 (click)="hideSidebar()">点击此处隐藏container</h4>
        </header>
      </p>
    </p>
    `
})
export class AppComponent { 
  isHideContainer: bollean = true; // 准备用于控制 container 显示与否，通过 *ngIf
  hideSidebar() {
    this.isHideContainer = false;
  }
}

2022-11-12 01:42 回答

胖蚂蚁

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签