Question

所以，我在练习中使用angular4，这对我来说是新的。幸运的是，为了获得我使用的html元素及其值 <HTMLInputElement> document.getElementById或 <HTMLSelectElement> document.getElementById

我想知道在角度

中是否有任何替代品

Answer 1

您可以使用#someTag标记DOM元素，然后使用@ViewChild('someTag')进行标记。

参见完整示例：

import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.log将打印一些文字。

Answer 2

您可以将DOCUMENT标记注入构造函数并在其上使用相同的函数

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

或者，如果您要获取的元素位于该组件中，则可以使用template references。

Answer 3

尝试一下：

TypeScript文件代码：

(<HTMLInputElement>document.getElementById("name")).value

HTML代码：

 <input id="name" type="text" #name />

Answer 4

    let kNumberBuffers = 3;
    var aqData = AQPlayerState()
    var bufferLength : Float64 = 0.1
 func playAudioFileWithToolbox(){
        let bundle = Bundle.main
        let permissions : AudioFilePermissions = .readPermission
        let filePath = bundle.path(forResource: "dreams", ofType: "wav")!
        var filePathArray = Array(filePath.utf8)
        let filePathSize = filePath.count
        let audioFileUrl = CFURLCreateFromFileSystemRepresentation(nil, &filePathArray, filePathSize, false)
        var  status = AudioFileOpenURL(audioFileUrl!, permissions, kAudioFileWAVEType, &aqData.mAudioFile)
        if status != noErr{
            print("ErrorOpeningAudioFileUrl")
        }
        var dataFormatSize:UInt32 = UInt32(MemoryLayout<AudioStreamBasicDescription>.size)
        status = AudioFileGetProperty(aqData.mAudioFile!, kAudioFilePropertyDataFormat, &dataFormatSize, &aqData.mDataFormat)
        if status != noErr{
            print("Error getting AudioStreamBasicDescription")
        }
        var queue : AudioQueueRef? = aqData.mQueue
        var dataFormat = aqData.mDataFormat
        let commonModes = CFRunLoopMode.commonModes.rawValue
        status = AudioQueueNewOutput(&dataFormat, callback, &aqData, CFRunLoopGetCurrent(), commonModes, 0, &queue)
        if status == noErr{
            aqData.mQueue = queue
        } else {
            print("TroubleSettingUpOutputQueue")
        }
        var maxPacketSize:UInt32 = 0;
        var propertySize:UInt32 = UInt32(MemoryLayout.size(ofValue: maxPacketSize))
        AudioFileGetProperty(aqData.mAudioFile!, kAudioFilePropertyPacketSizeUpperBound, &propertySize, &maxPacketSize)
        var bufferByteSize = aqData.bufferByteSize
        DeriveBufferSize(ASBDesc: &dataFormat, maxPacketSize: maxPacketSize, seconds: bufferLength, outBufferSize: &bufferByteSize, outNumPacketsToRead: &aqData.mNumPacketsToRead)
        aqData.bufferByteSize = bufferByteSize
        let isFormatVBR = aqData.mDataFormat.mBytesPerPacket == 0 || aqData.mDataFormat.mFramesPerPacket == 0
        if isFormatVBR{
            aqData.mPacketDescs = UnsafeMutablePointer<AudioStreamPacketDescription>.allocate(capacity: Int(aqData.mNumPacketsToRead))
        }  else {
            aqData.mPacketDescs = nil
        }
        var cookieSize = UInt32(MemoryLayout.size(ofValue: UInt32.self))
        let couldNotGetProperty = AudioFileGetPropertyInfo(aqData.mAudioFile!, kAudioFilePropertyMagicCookieData, &cookieSize, nil)

        if couldNotGetProperty == 0 && cookieSize > 0{

            var magicCookie = UnsafeMutableRawPointer.allocate(byteCount: Int(cookieSize), alignment: MemoryLayout<UInt32>.alignment)
            status = AudioFileGetProperty(aqData.mAudioFile!, kAudioFilePropertyMagicCookieData, &cookieSize, &magicCookie)
            if status != noErr{
                print("Error:Failed to get magic cookie.")
            }

            AudioQueueSetProperty(aqData.mQueue!, kAudioQueueProperty_MagicCookie, magicCookie, cookieSize)
            magicCookie.deallocate()
        }
        aqData.mCurrentPacket = 0
        for i in 0..<kNumberBuffers{
            var pointer = aqData.mBuffers?.advanced(by: i)
            status = AudioQueueAllocateBuffer(aqData.mQueue!, aqData.bufferByteSize, &pointer)
            if status != noErr{
                print("Error allocating audio buffer.")
                continue
            }
            var buffer = aqData.mBuffers![i]
            callback(&aqData, aqData.mQueue!, &buffer) //I can imagine how this does anything when it is not running
        }
        //Set Volume
        AudioQueueSetParameter(aqData.mQueue!, kAudioQueueParam_Volume, 0.5)//I have way bigger problems

        //Start Playing
        aqData.mIsRunning = true
        status = AudioQueueStart(aqData.mQueue!, nil)
        if status != noErr{
            print("Error:Failed to start audio queue.")
        }
        repeat {
            CFRunLoopRunInMode(CFRunLoopMode.defaultMode, 0.1, false)
        } while aqData.mIsRunning
        CFRunLoopRunInMode(CFRunLoopMode.defaultMode, 1, false)
    }
    private let callback: AudioQueueOutputCallback = { userData, inAQ, inBuffer in
        var aqData = userData!.load(as: AQPlayerState.self)       // 255
        if !aqData.mIsRunning{ return }                     // 2
        var numBytesReadFromFile : UInt32 = 0
        var numPackets = aqData.mNumPacketsToRead
        AudioFileReadPacketData(aqData.mAudioFile!, false, &numBytesReadFromFile, aqData.mPacketDescs, aqData.mCurrentPacket, &numPackets, inBuffer)
        if (numPackets > 0) {
            inBuffer.pointee.mAudioDataByteSize = numBytesReadFromFile
            let packetCount = aqData.mPacketDescs!.pointee.mVariableFramesInPacket
            AudioQueueEnqueueBuffer (
                aqData.mQueue!,
                inBuffer,
                packetCount,
                aqData.mPacketDescs
            );
            aqData.mCurrentPacket += Int64(numPackets)
        } else {
            AudioQueueStop (aqData.mQueue!,false)
            aqData.mIsRunning = false
        }
    }

    func DeriveBufferSize (ASBDesc: inout AudioStreamBasicDescription, maxPacketSize:UInt32, seconds:Float64, outBufferSize: inout UInt32,outNumPacketsToRead: inout UInt32) {
        let maxBufferSize = 0x50000
        let minBufferSize = 0x4000
        if ASBDesc.mFramesPerPacket != 0 {
            let numPacketsForTime = ASBDesc.mSampleRate / Float64(ASBDesc.mFramesPerPacket) * seconds
            outBufferSize = UInt32(numPacketsForTime) * maxPacketSize
        } else {                                                         // 9
            outBufferSize = max(UInt32(maxBufferSize), maxPacketSize)
        }

        if outBufferSize > maxBufferSize && outBufferSize > maxPacketSize{  //10
            outBufferSize = UInt32(maxBufferSize)
        } else if outBufferSize < minBufferSize {
            outBufferSize = UInt32(minBufferSize)
        }
        outNumPacketsToRead = outBufferSize / UInt32(maxPacketSize)           // 12
    }
}

struct AQPlayerState{
    var mDataFormat:AudioStreamBasicDescription = AudioStreamBasicDescription()
    var mQueue:AudioQueueRef?
    var mBuffers:AudioQueueBufferRef? = UnsafeMutablePointer<AudioQueueBuffer>.allocate(capacity: 3)
    var mAudioFile: AudioFileID?
    var bufferByteSize:UInt32 = 0
    var mCurrentPacket:Int64 = 0
    var mNumPacketsToRead:UInt32 = 0
    var mPacketDescs : UnsafeMutablePointer<AudioStreamPacketDescription>?
    var mIsRunning : Bool = false
    init(){

    }
}

Answer 5

对于Angular 8或后置@ViewChild还有一个名为opts的附加参数，它具有两个属性：read和static，read是可选的。您可以像这样使用它：

@ViewChild('mydiv', { static: false }) mydiv: ElementRef;

请注意，这是针对Angular 8或后角的。

angular4 / typescript中的document.getElementById替换？

5 个答案: