@ViewChild 的三種常用方法

//--1------ 在angular中進行dom操作
<div #dom>這是一個div</div> //放置一個錨點domimport { ElementRef, ViewChild } from '@angular/core';@ViewChild('dom',{static:true}), eleRef:ElementRef;
//static-True表示在運行更改檢測之前解析查詢結果,false用于在更改檢測后解析。默認為false。// dom 操作需要在ngAfterViewInit()中進行
// ViewChild會在ngAfterViewInit()回調函數之前做完工作,也就是說你不能在構造函數中使用這個元素。
ngAfterViewInit(){let attr = this.eleRef.nativeElement;console.log(attr) //<div>這是一個div<div>attr.innerHTML = "@ViewChild的dom操作";attr.color = "red";console.log(attr) //<div>@ViewChild的dom操作<div>
}//--2-------通過放置錨點獲取子組件中的方法和屬性
//在子組件中有一個run方法<app-test-it #header></app-test-it> //在父組件中引入子組件并放置一個錨點 header
<button (click)="getSonFn()">點擊獲取子組件里面的方法</button>import {ElementRef,ViewChild} from "angular/core";@ViewChild('header',{static:true}), my:any;getSonFn(){ //這是一個點擊方法,點擊調用這個方法。this.my.run();
}//--3------通過父組件中注入子組件以獲取子組件中的方法和屬性
//子組件中:
<p>{{number}}</p>number:number = 0
addNumber(){this.number++
}//父組件中:
<button (click)="upCount()">number++</button>
<button (click)="downcount()">number--</button>
<app-test-it></app-test-it> //該子組件import {ViewChild} from @angular/core;
import {TestItComponent} from './test/test-it.component";//引入子組件@ViewChild('TestItComponent',{static: ture}) son:TestItComponent; // 核心代碼:用于查詢子組件,并在本地創建的子組件對象 childcomponent 紅注入相同屬性。父組件同樣有兩個方法,自增和自減。upCount(){this.son.addNumber();
}
downCount(){this.son.number--;
}

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247319.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247319.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247319.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SQL Server安裝文件掛起錯誤解決辦法

以前在安裝sql的時候&#xff0c;如此提示&#xff0c;我只要重新啟動即可&#xff0c;可是今天重新啟動了N次計算機&#xff0c;問題卻絲毫沒有解決&#xff0c;依然提示這樣的話。“以前的某個程序安裝已在安裝計算機上創建掛起的文件操作。運行安裝程序之前必須重新啟動計算…

angular 內容投影

app HTML <div class"wrapper"><h2>我是父組件</h2><div>這個div定義在父組件中</div><app-child><div class"header">這個div是父組件投影到子組件的1, {{title}}</div><div class"footer"…

移動端日歷插件

//datePicker日期控件 v1.0//var calendar new datePicker();//calendar.init({// trigger: #demo1, /*選擇器&#xff0c;觸發彈出插件*/// type: date,/*date 調出日期選擇 datetime 調出日期時間選擇 time 調出時間選擇 ym 調出年月選擇*/// minDate:1900-1-1,/*最小日期*/…

js 操作location URL對象進行操作

把location 創建URL對象 構造器 new URL() 創建并返回一個URL對象&#xff0c;該URL對象引用使用絕對URL字符串&#xff0c;相對URL字符串和基本URL字符串指定的URL。 屬性 hash 包含#的USVString&#xff0c;后跟URL的片段標識符。 host 一個USVString&#xff0c;其中…

aspx,ascx和ashx使用小結

做asp.net開發的對.aspx,.ascx和.ashx都不會陌生。關于它們&#xff0c;網上有很多文章介紹。“紙上得來終覺淺&#xff0c;絕知此事要躬行”&#xff0c;下面自己總結一下做個筆記。 1、.aspx Web窗體設計頁面。Web窗體頁由兩部分組成&#xff1a;視覺元素&#xff08;html、服…

vue3.x通過ref屬性獲取元素

在vue2.x中&#xff0c;可以通過給元素添加refxxx屬性&#xff0c;然后在代碼中通過this.$refs.xxx獲取到對應的元素 然而在vue3中時沒有$refs這個東西的&#xff0c;因此vue3中通過ref屬性獲取元素就不能按照vue2的方式來獲取vue3需要借助生命周期方法&#xff0c;原因很簡單…

vue3+TypeScript封裝echarts5組件

https://blog.csdn.net/qq_38330707/article/details/111497853 有用mark 等抽時間寫個vueTSecharts5.0的組件文章 寫個大概 帶 resize的 <template><div class"echarts" :id"id"></div> </template><script lang"ts&q…

How to Register COM in VS

在 Visual Studio .Net 部署項目中注冊 COM 模塊的步驟 將 COM 對象添加到 Visual Studio 部署項目。在解決方案資源管理器中&#xff0c;右鍵單擊剛添加的模塊&#xff0c;然后單擊屬性。注意&#xff1a;“屬性”窗口包含一個表&#xff0c;其中有兩列和 x 行&#xff08;行數…

css3 卡片hover3D效果

鼠標hover卡片 向上翻轉&#xff0c;看簡易代碼 <!DOCTYPE html> <html> <head><title>3D Flip Card hover effects</title><style type"text/css">* {margin: 0;padding: 0;font-family: consolas;box-sizing: border-box;}bo…

隨便貼兩個漏洞,如 Apache JServ協議服務

1、Apache JServ協議服務 描述&#xff1a;Apache JServ協議&#xff08;AJP&#xff09;是一種二進制協議&#xff0c;可以將來自Web服務器的入站請求代理到 位于Web服務器后面的應用程序服務器。不建議在互聯網上公開使用AJP服務。 如果AJP配置錯誤&#xff0c;可能會允許攻擊…

vue3學習筆記 Composition API setup

一、Composition API優勢 相對于vue2的option API Vue3的Composition API設計更有優勢 Composition(組合式)Api 功能分組 Composition(組合式)Api 功能導入復用 組合式Api 所解決的問題 (1) 更好的代碼組織結構 (2) 相同的代碼邏輯可以進行復用 home.vue 3種方式遞進升級…

【TCP傳輸數據-鍵盤錄入】

package com.yjf.esupplier.common.test;import java.io.*; import java.net.Socket;/*** author shusheng* description TCP 傳輸數據:鍵盤錄入* Email shushengyiji.com* date 2019/1/15 22:57*/ public class ClientDemo1 {public static void main(String[] args) throws I…

04

1、創建/guanli 目錄&#xff0c;在/guanli下創建zonghe 和 jishu 兩個目錄&#xff08;一條命令&#xff09; [rootlocalhost ~]# mkdir /guanli [rootlocalhost ~]# touch /guanli/zonghe [rootlocalhost ~]# touch /guanli/jishu [rootlocalhost ~]# ls /guanlix 2、添加組帳…

事件冒泡 bubbles cancelBubble stopPropagation() stopImmediatePropagation() 區別

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>事件冒泡</title></head><body><h4>bubbles cancelBubble stopPropagation() stopImmediatePropagation() 區別</h4><input type"te…

vue2.0關于添加屬性后視圖不能更新的問題

屬性賦值和this.$set 和vue.$set方法我不行 可以用 this.$delete來進行刪除后在設置都可以了 轉載于:https://www.cnblogs.com/zhouyideboke/p/11276299.html

vite2.1 最新alias別名設置方式

vite.config.js 別名配置 resolve.alias 類型&#xff1a; Record<string, string> | Array<{ find: string | RegExp, replacement: string }> 將會被傳遞到 rollup/plugin-alias 作為 entries 的選項。也可以是一個對象&#xff0c;或一個 { find, replacement …

Java生鮮電商平臺-商城后臺架構與原型圖實戰

Java生鮮電商平臺-商城后臺架構與原型圖實戰 說明&#xff1a;生鮮電商平臺的運營平臺&#xff0c;其中需要很多的功能進行管理。目前把架構與原型圖實戰分享給大家&#xff0c;希望對大家有用. 儀表盤/首頁&#xff0c;簡單統計&#xff0c;報表頁&#xff0c;運營快捷口。實際…

antdesignvue upload vue3個人筆記待更新

remove點擊移除文件時的回調&#xff0c;返回值為 false 時不移除。支持返回一個 Promise 對象&#xff0c;Promise 對象 resolve(false) 或 reject 時不移除。Function(file): boolean | Promise無 beforeUpload上傳文件之前的鉤子&#xff0c;參數為上傳的文件&#xff0c;若…

logging模塊和包

日志模塊和包 logging logging模塊簡介 logging模塊是記錄我們軟件的各種狀態&#xff0c;還可以記錄各種交易信息 其實每個軟件都是有錯誤日志的,開發人員可以通過錯誤日志中的內容對他的程序進行修改 日志級別 import logginglogging.debug(調試debug) # DEBUG 10…

python軟件開發規范

軟件開發規范 什么是軟件開發規范&#xff1f; 好的設計項目目錄結構&#xff0c;就和編碼風格一樣&#xff0c;是每個程序員都有的風格&#xff0c;但是在流水化標準化作業過程中&#xff0c;個性和風格是 不被鼓勵的。如果你去維護一個非常不好讀的項目&#xff0c;雖然實現邏…