Question

我有一个导航栏，其中我有购物车，我有一个视图产品组件，我可以在其中显示产品列表并将产品添加到主推车。如何将值传递给产品组件中的主要组件。因此，我可以反映在主要组件的购物车中。

我试过了：产品组件：

    @Component({
      selector:'product',
      template:'Poduct List is getting rendered here and here is a 
      button by clicking the button onClick() method will be called
      and item added into service .This whole template is running in for loop'
    })

    @Input itemAdded:number;

    onClick()
    {
     itemAdded++;
     service.setCartItem(itemAdded);
    }

很抱歉，我无法将代码粘贴得太大。

主要组成部分：

<div class="cart"><product [itemAdded]="valueCommingfromService"></div>

问题在于购物车价值是product选择器的一部分所有其他html元素在主要组件中呈现，即产品列表。

请建议我如何实现这个目标。

Answer 1

查看official document from Angular2以下是代码示例 -

import { Component, Input } from '@angular/core';
import { Hero } from './hero';

@Component({
  selector: 'hero-child',
  template: `
   <h3>{{hero.name}} says:</h3>
   <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>`
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

Here是我建议的另一个链接，以便更好地理解。

Answer 2

主要组成部分：

.write

在您需要获取传递值的组件中

<div class="cart"><product [itemAdded] ="passthevaluehere" /></div>

我希望这个解决你的问题

Answer 3

正如评论者所建议的那样，这个问题非常不明确，但似乎与一个常见问题重复。关于html在主要组件中显示的具体问题 - 这是因为您没有关闭产品标签：

Public Sub Successful_New_Msr()
    '
    Dim Sort_Col As DataGridViewColumn = Nothing
    Dim Need_Statuses As Boolean = True

    'How to proceed?
    If Not IsNothing(Target_Row) Then
        'Prevent creation of bogus status records
        Need_Statuses = False
        Try
            'Delete the current version. This way the normal Add step covers both cases
            Msr_List.Rows.Remove(Target_Row)
            Target_Row = Nothing
        Catch ex As Exception
            MsgBox("Encountered an error while removing the old version of a measure. Due to the potentially dire consequences of this error, the program" _
                   & " will now close. The HEDIS Measure XML should be restored from backup. Please see the error log for more details.", _
                   vbOKOnly, "Critical Measure List Management Error")
            MWin.Err.AddErr("Encountered an error while removing the old version of a measure that was updated. Details: " & ex.Message _
                            & Chr(10) & Chr(10) & ex.InnerException.Message, MWin.Err_Path & MWin.Err.DStamp & MWin.Log_Name)
            MWin.Close()
        End Try
    End If 'else we're adding a new population so just proceed to adding the list row

    'Add the new row/version of the row
    Try
        Msr_List.Rows.Add(New_Msr_Form.Msr_ID.Text, New_Msr_Form.Msr_Name.Text, New_Msr_Form.SubMsr_Name.Text, New_Msr_Form.Msr_Key.Text, _
                          New_Msr_Form.SubMsr_Key.Text, New_Msr_Form.Spec_Section.Text, New_Msr_Form.Complexity.Text, New_Msr_Form.Spec_Yr_Created.Text, _
                          New_Msr_Form.Spec_Yr_Removed.Text, New_Msr_Form.Denom_Only.Checked, New_Msr_Form.Report_Medicaid.Checked, _
                          New_Msr_Form.Report_Medicare.Checked, New_Msr_Form.Report_Ambetter.Checked)

        Msr_List.Refresh()
        Refresh()
        'Update form variables
        'New_Edit_Status = ""
        Msrs_Changed = True
    Catch ex As Exception
        MsgBox("Encountered an error while creating the new version of an update measure. Due to the potentially dire consequences of this" _
               & "error, the program will now close. The HEDIS Measure XML should be restored from backup. Please see the error log for " _
               & "more details.", vbOKOnly, "Updated Measure Creation Error")
        MWin.Err.AddErr("Encountered an error while adding a new row to the QSI Populations DataGridView. Details: " & ex.Message, _
                        MWin.Err_Path & MWin.Err.DStamp & MWin.Log_Name)
        MWin.Close()
    End Try

    'Push the data back to the data table
    Fill_Tbl_From_List(Msr_List, MWin.HEDIS_Msr_List_Tbl, "Msr_List_View", MWin)

    'Create statuses if needed
    If Need_Statuses Then
        Create_Statuses(New_Msr_Form.Spec_Yr_Created.Text, New_Msr_Form.Msr_ID.Text, MWin)
    End If 'else nothing needs done

    'Re-sort
    Try
        Sort_Col = Msr_List.Columns("Msr_ID")
        Msr_List.Sort(Sort_Col, System.ComponentModel.ListSortDirection.Ascending)

    Catch ex As Exception
        MsgBox("Encountered an error trying re-sort the updated HEDIS Measures list to properly place the new/updated row. This is" _
               & " non-critical so the program will continue, but an error log entry has been created with more details.", vbOKOnly, _
               "Measure List Sort Error")
        MWin.Err.AddErr("Encountered an error while trying to sort the QSI Populations DataGridView. Details: " & ex.Message & _
                        Chr(10) & Chr(10) & "Inner Exception: " & ex.InnerException.Message, MWin.Err_Path & MWin.Err.DStamp & MWin.Log_Name)
    End Try

    'Cancelled_New_Msr handles remaining clean-up needed so invoke it
    Cancelled_New_Msr()
End Sub


Public Sub Cancelled_New_Msr()
    '
    'Check if we should enable the Edit btn
    If Msr_List.Rows.Count > 0 Then
        Edit_Btn.Enabled = True
    Else
        Edit_Btn.Enabled = False
    End If

    'Dispose of the form
    If Not (IsNothing(New_Msr_Form)) Then
        New_Msr_Form = Nothing
    End If 'else no form to dispose of
End Sub

另一件事 - 您在模板中根本没有使用onClick方法。您应该重命名它并将重命名的方法绑定到click指令：

<div class="cart"><product [itemAdded]="valueCommingfromService"></product></div>

如何将数据从一个组件传递到另一个组件angular2

3 个答案: