이 글에서는 Angular의 DOM 작업을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 권장 사항: "angular Tutorial"
데모 앱 구성 요소: 전환
HTML
<div class="content"> <p>内容区域</p> <div id="box"> this is box </div> <br> <div id="box1" *ngIf="flag"> this is box1 </div> <button (click)="showAside()">弹出侧边栏</button> <button (click)="hideAside()">隐藏侧边栏</button> </div> <aside id="aside"> 这是一个侧边栏 </aside>
Component ts:
public flag:boolean=true; constructor() { } ngOnInit(): void { //组件和指令初始化完成 并不是真正的dom加载完成 let oBox:any=document.getElementById('box'); console.log(oBox.innerHTML); oBox.style.color="red"; //获取不到dom节点 /* let oBox1:any=document.getElementById('box1'); console.log(oBox1.innerHTML); oBox1.style.color="blue"; */ } //视图加载完成以后触发的方法 dom加载完成 (建议把dom操作放在这个里面) ngAfterViewInit(){ let oBox1:any=document.getElementById('box1'); console.log(oBox1.innerHTML); oBox1.style.color="blue"; } showAside(){ //原生js获取dom节点 var asideDom:any=document.getElementById('aside'); asideDom.style.transform="translate(0,0)"; } hideAside(){ //原生js获取dom节点 var asideDom:any=document.getElementById('aside'); asideDom.style.transform="translate(100%,0)"; }
ViewChild: attribute decorator
Demo 파일: ngDemosrcappcomComponentsnews
1. 이제 구성 요소 템플릿 파일은 #
을 통해 속성을 정의합니다.
2. 이제 구성 요소 ts는 ViewChild
<div #myBox> 我是一个dom节点 </div>
<div #myBox>我是一个dom节点</div> <app-header #header></app-header> <button type="button" (click)='getChildProp()'>获取子组件header的属性</button> <button type="button" (click)='getChildMethod()'>获取子组件header的方法</button>
를 통해 dom을 얻습니다. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 Angular의 DOM 작업에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!